如何创建自定义窗口弹出？ [英] How to create a custom window pop?
本文介绍了如何创建自定义窗口弹出？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在用户点击复选框时创建了弹出窗口。单击复选框后，我会弹出相关消息，供用户确认是否确实要单击复选框。选中复选框并且用户想要取消选中它时相同。如果真的要取消选中复选框，我想显示弹出的相关信息。
我的代码：
js code
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
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 code
<!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:
#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; }
我有什么尝试过：
我试图打电话给onclick =Confirm.render（'你确定要在复选框上同步？'，'check_box'）但这没有帮助。
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.
推荐答案
（' input：checkbox'）。click（ function （）{
var checked =
('input:checkbox').click(function(){ var checked =
（ this ）。is（' ：checked'）;
if （选中）{
if （！confirm（ 您确定要启用所有设备吗？'））{
(this).is(':checked'); if(checked) { if(!confirm('Are you sure you want to enable all device use?')){
（ this ）。removeAttr（' checked'）;
}
} else if （！confirm（' 您确定要禁用所有设备吗？'））{
(this).removeAttr('checked'); } } else if(!confirm('Are you sure you want to disable all device use?')){
这篇关于如何创建自定义窗口弹出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
