How to create a custom window pop?

Question

0.00/5 (No votes)

See more:

I have create the pop window when user click check-box. When the check box is clicked, I display the pop up with relevant message for user to confirm if the really want to click the check box. Same when the check box is checked and user want to uncheck it. I want to display the pop up with relevant message if the really want to uncheck the checkbox.

My code:

js code

JavaScript

function CustomAlert(){
	this.render = function(dialog){
		var winW = window.innerWidth;
	    var winH = window.innerHeight;
		var dialogoverlay = document.getElementById('dialogoverlay');
	    var dialogbox = document.getElementById('dialogbox');
		dialogoverlay.style.display = "block";
	    dialogoverlay.style.height = winH+"px";
		dialogbox.style.left = (winW/2) - (550 * .5)+"px";
	    dialogbox.style.top = "100px";
	    dialogbox.style.display = "block";
		document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";
	    document.getElementById('dialogboxbody').innerHTML = dialog;
		document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
	}
	this.ok = function(){
		document.getElementById('dialogbox').style.display = "none";
		document.getElementById('dialogoverlay').style.display = "none";
	}
}
var Alert = new CustomAlert();
function checkBoxPost(id){
	var db_id = id.replace("post_", "");
	$('input:checkbox').click(function(){
			var checked = $(this).is(':checked');
			if(checked) {
				if(!confirm('Are you sure you want to enable all device use?')){         
					$(this).removeAttr('checked');
				}
			} else if(!confirm('Are you sure you want to disable all device use?')){
				$(this).attr("checked", "checked");
			}
	});
}
function CheckBoxConfirm(){
	this.render = function(dialog,op,id){
		var winW = window.innerWidth;
	    var winH = window.innerHeight;
		var dialogoverlay = document.getElementById('dialogoverlay');
	    var dialogbox = document.getElementById('dialogbox');
		dialogoverlay.style.display = "block";
	    dialogoverlay.style.height = winH+"px";
		dialogbox.style.left = (winW/2) - (550 * .5)+"px";
	    dialogbox.style.top = "100px";
	    dialogbox.style.display = "block";
		
		document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
	    document.getElementById('dialogboxbody').innerHTML = dialog;
		document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(\''+op+'\',\''+id+'\')">Yes</button> <button onclick="Confirm.no()">Cancel</button>';
	}
	this.no = function(){
		document.getElementById('dialogbox').style.display = "none";
		document.getElementById('dialogoverlay').style.display = "none";
	}
	this.yes = function(op,id){
		if(op == "check_box"){
			checkBoxPost(id);
		}
		document.getElementById('dialogbox').style.display = "none";
		document.getElementById('dialogoverlay').style.display = "none";
	}
	
}
var Confirm = new CheckBoxConfirm();

HTML code

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/dialog.css">
<script src="js/dialog.js"></script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<label for="sync_payments"><input type="checkbox" id="sync_payments" name="sync_payments" onclick="Confirm.render(checkBoxPost)"/> Enable for all device(s) </label>


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
</body>

</html>

My Style:

CSS

#dialogoverlay
{
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 10;
}
#dialogbox
{
	display: none;
	position: fixed;
	background: #99cc00  ;
	border-radius:7px; 
	width:500px;
	z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #C1e0ea ; font-size:19px; padding:10px; color:#fff; }
#dialogbox > div > #dialogboxbody{ background: #75A9BC; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #C1e0ea; padding:10px; text-align:right; }

What I have tried:

I have tried to call the onclick="Confirm.render('You sure you want to sync?','check_box')" on the check box but this didn't help.

Posted 4-May-16 23:07pm

iDoKin

Updated 5-May-16 0:24am

Add a Solution

Comments

Karthik_Mahalingam 5-May-16 5:38am

you mean confirm alert?

iDoKin 5-May-16 5:40am

Yes, whaat is it I m doing wrong on my code? The is the link https://fiddle.jshell.net/9herrf9r/

Karthik_Mahalingam 5-May-16 5:50am

your requirement is bit confusing.. pls tell step by step operation.
dont confuse us with modal popup and confirm box ..

iDoKin 5-May-16 5:57am

1. If user clicks the checkbox, i want to show my custom pop up to ask user if they really want to check it. If user click OK, I check the checkbox. Else if they click CANCEL keep checkbox unchecked.
2. If user want to uncheck the checkbox, I want to also show my custom pop up to ask user if they really want to uncheck the checkbox. If they click OK uncheck the checkbox. Else if they click CANCEL keep checkbox checked.

Karthik_Mahalingam 5-May-16 6:24am

verify the functionality from below code

iDoKin 5-May-16 6:31am

Okay i will test it and tell if its working.

iDoKin 5-May-16 6:52am

It does not call the right message when checkbox is ticked or unticked.

Karthik_Mahalingam 5-May-16 7:00am

remove this
if (op == "check_box") {
checkBoxPost(id);
}

iDoKin 5-May-16 7:14am

Thanks, did remove the if statement i get the undefined as message. But i will debug and see where the problem is.

Karthik_Mahalingam 5-May-16 7:15am

Place a debugger and see where you are getting the error

dont call this function checkBoxPost(id) anywhere

iDoKin 5-May-16 7:20am

this my html "<label for="sync_payments"><input type="checkbox" id="sync_payments" name="sync_payments" /> Enable for all devices </label>"

Karthik_Mahalingam 5-May-16 7:25am

do u need confirm box on top of modal popup ?

iDoKin 5-May-16 7:47am

Yes

Karthik_Mahalingam 5-May-16 7:26am

wait i will post entire code, check it.

iDoKin 5-May-16 7:36am

Hey its still return undefined

Karthik_Mahalingam 5-May-16 7:51am

check my updated solution, in a new html file.. just copy paste

iDoKin 5-May-16 8:08am

Hey KARTHIK this what i have done this far

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<link rel="stylesheet" href="css/dialog.css">
<script src="js/dialog.js"></script>
<meta charset="UTF-8">

</head>
<body>

<label for="sync_payments">
<input type="checkbox" id="sync_payments" name="sync_payments" /> Enable for all device(s)
</label>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
</body>
<script>

$('#sync_payments').change(function() {
if($(this).is(':checked')){
console.log("CCCCheckeddddddd");
if(!confirm("Are you sure you want to enable all devices?'")){
$(this).removeAttr('checked');
}
}
else
{
console.log("UNCheckeddddddd");
if(!confirm("Are you sure you want to disable enable all devices?")){
$(this).attr("checked", "checked");
}
}
});
</script>
</html>

But i want the custom pop window. You can copy and paste that to test it.

Karthik_Mahalingam 5-May-16 8:40am

replace the entire script with below code...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-05-05T00:24:00