js/jquery/layui 弹出确认 确认取消对话框的实现方法
一种：
<a href="javascript:if(confirm('确实要删除该内容吗?')){location='https://www.365jz.com'}">弹出窗口</a>
二种：
<script language="JavaScript">
function delete_confirm(e)
{
if (event.srcElement.outerText == "删除")
{
event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");
}
}
document.onclick = delete_confirm;
</script>
<a href="Delete.aspx" onClick="delete_confirm">删除</a>
三种：
if(window.confirm('你确定要取消交易吗？')){
//alert("确定");
return true;
}else{
//alert("取消");
return false;
}
四种：
<script language="JavaScript">
function delete_confirm() <!--调用方法-->
{
event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");
}
</script>
方法一讲解：
分解成三部分来看：
<a href="javascript: // ">表示点击超链接后执行相应的javascript代码。
confirm() 表示一个要求确认的对话框，用户点击确定返回true，取消则返回false。
if(confirm())则表示，如果用户选择了确定，则执行if代码，否则什么也不做。
五种：Layui 弹框的 实现，可以利用弹框的确定取消按钮
layer.confirm("确认要下架吗，下架后不能恢复", { title: "公告下架确认" },
function (index) {
layer.close(index);
$.ajax({
url : 'notice_delete.action',
dataType : 'text',
data :{'pk':id},
success : function(msg) {
/*下架成功*/
if (msg == "1") {
layer.alert('公告下架成功', {
title: "下架操作",
btn: ['确定']
},function (index, item) {
location.reload();
});
} else{
layer.alert('公告下架失败', {
title: "下架操作",
btn: ['确定']
},
function (index, item) {
location.reload();
});
}
}
});
})jQuery实现单击按钮遮罩弹出对话框:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>遮罩弹出窗口</title> <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> <style type="text/css"> /* CSS Document */ @CHARSET "UTF-8"; *{ margin: 0px; padding: 0px; } .divShow{ /*设置字体高度 div的高度 背景色 div宽度 左内距为10px */ line-height: 50px; height: 60px; background-color: #dddddd; width: 300px; padding-left: 15px; } .dialog{ /* 设置宽度 设置边框宽度+颜色+引 display：none表示影藏 z-index：//保证该层在最上面显示 */ width: 360px; border: 10px #fff solid; position: absolute; display: none; z-index: 101; } .dialog .title{ /* 设置背景色 设置内边距 设置字体颜色 设置字体加粗 */ background:#fbaf15; padding: 10px; color: #fff; font-weight: bold; } .dialog .title img{ /* 设置元素向右浮动 */ float:right; } .dialog .content{ /* 设置背景色 设置内边距 设置高度 */ background: #fff; padding: 25px; height: 60px; } .dialog .content img{ float: left; } .dialog .content span{ float: left; padding: 10px; } .dialog .bottom{ /* 设置文本向右对齐 设置内边局 上右下左 */ text-align: right; padding: 10 10 10 0; background: #eee; } .mask{ /* 里面有个display：no； 开始的时候看不到这个div的效果它主要作用是封闭整个页面 */ width: 100%; height: 100%; background: #000; position: absolute; top: 0px; left: 0px; display: none; z-index: 100; } .btn{ border: #666 1px solid; width: 65px; } </style> <script type="text/javascript"> // JavaScript Document$(function(){ //绑定删除按钮的触发事件 $(document).ready(function(){ //按下按钮触发操作 $("#button1").click(function(){ //设置 div 元素的不透明级别：透明度取值(取值范围[0.0,1.0]) $(".mask").css("opacity","0.3").show(); //制作对话框 showDialog(); //展现css的特效 $(".dialog").show(); }); //当页面窗口大小改变时触发的事件 $(window).resize(function(){ if(!$(".dialog").is(":visible")){ return; } showDialog(); }); //注册关闭图片单击事件 $(".title img").click(function(){ //隐藏效果 $(".dialog").hide(); $(".mask").hide(); }); //取消按钮事件 $("#noOk").click(function(){ $(".dialog").hide(); $(".mask").hide(); }); //确定按钮事假 $("#ok").click(function(){ $(".dialog").hide(); $(".mask").hide(); if($("input:checked").length !=0){ //注意过滤器选择器中间不能存在空格$("input :checked")这样是错误的 $(".divShow").remove();//删除某条数据 } }); }); /* * 根据当前页面于滚动条的位置，设置提示对话框的TOP和left */ function showDialog(){ var objw=$(window);//获取当前窗口 var objc=$(".dialog");//获取当前对话框 var brsw=objw.width(); //获取页面宽度 var brsh=objw.height(); //获取页面高度 var sclL=objw.scrollLeft(); //获取页面左滑动条信息 var sclT=objw.scrollTop(); var curw=objc.width(); //获取对话框宽度 var curh=objc.height(); //获取对话框高度 var left=sclL+(brsw -curw)/2; //计算对话框居中时的左边距 var top=sclT+(brsh-curh)/2; //计算对话框居中时的上边距 objc.css({"left":left,"top":top}); //设置对话框居中 } </script> </head> <body> <div class="divShow"> <input type="checkbox" id="chexkBox1"> <a href="#">这是一条可以删除的记录</a> <input id="button1" type="button" value="删除" class="btn"> </div> <div class="mask"></div> <div class="dialog"> <div class="title"> <img alt="点击可以关闭" src="" width="20px" height="20px;"> 删除时提示 </div> <div class="content"> <img alt="" src="" width="60px" height="60px"> <span>你真的要删除这条记录吗？</span> </div> <div class="bottom"> <input type="button" id="ok" value="确定" class="btn"> <input type="button" id="noOk" value="取消" class="btn"> </div> </div> </body> </html>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
