您现在的位置： 365建站网 > 365文章 > js/jquery/layui 弹出确认 确认取消对话框的实现方法

js/jquery/layui 弹出确认 确认取消对话框的实现方法

文章来源：365jz.com     点击数：3058    更新时间：2018-07-30 09:00   参与评论

一种：

<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 弹框的 实现，可以利用弹框的确定取消按钮


</>code
  1. layer.confirm("确认要下架吗，下架后不能恢复", { title: "公告下架确认" }, 
  2. function (index) {  
  3.               layer.close(index);  
  4.                 $.ajax({
  5.     url : 'notice_delete.action',
  6.     dataType : 'text',
  7.     data :{'pk':id},
  8.     success : function(msg) {
  9.     /*下架成功*/
  10.     if (msg == "1") {
  11.     layer.alert('公告下架成功', {  
  12.                                 title: "下架操作",  
  13.                                 btn: ['确定']  
  14.                             },function (index, item) {  
  15.                                 location.reload();  
  16.                             });
  17.     } else{
  18.     layer.alert('公告下架失败', {  
  19.                                 title: "下架操作",  
  20.                                 btn: ['确定']
  21.                             },
  22.     function (index, item) {  
  23.                                 location.reload();  
  24.                             });
  25.     }
  26.     }
  27.     });   
  28. })


jQuery实现单击按钮遮罩弹出对话框:

</>code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>遮罩弹出窗口</title> 
  6. <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> 
  7.  
  8. <style type="text/css">
  9. /* CSS Document */
  10.  
  11. @CHARSET "UTF-8"; 
  12. *{ 
  13. margin: 0px; 
  14. padding: 0px; 
  15.  
  16. } 
  17. .divShow{ 
  18. /*设置字体高度
  19. div的高度
  20. 背景色
  21. div宽度
  22. 左内距为10px
  23. */
  24. line-height: 50px; 
  25. height: 60px; 
  26. background-color: #dddddd; 
  27. width: 300px; 
  28. padding-left: 15px; 
  29. } 
  30.  
  31.  
  32.  
  33. .dialog{ 
  34. /*
  35. 设置宽度
  36. 设置边框宽度+颜色+引
  37. display：none表示影藏
  38. z-index：//保证该层在最上面显示 
  39. */
  40. width: 360px; 
  41. border: 10px #fff solid; 
  42. position: absolute; 
  43. display: none; 
  44. z-index: 101;
  45. } 
  46.  
  47. .dialog .title{ 
  48. /*
  49. 设置背景色
  50. 设置内边距
  51. 设置字体颜色
  52. 设置字体加粗
  53. */
  54. background:#fbaf15; 
  55. padding: 10px; 
  56. color: #fff; 
  57. font-weight: bold; 
  58.  
  59. } 
  60.  
  61. .dialog .title img{ 
  62. /*
  63. 设置元素向右浮动
  64. */
  65. float:right; 
  66. } 
  67.  
  68. .dialog .content{ 
  69. /*
  70. 设置背景色
  71. 设置内边距
  72. 设置高度
  73. */
  74. background: #fff; 
  75. padding: 25px; 
  76. height: 60px; 
  77. } 
  78.  
  79. .dialog .content img{ 
  80. float: left; 
  81. } 
  82. .dialog .content span{ 
  83. float: left; 
  84. padding: 10px; 
  85.  
  86. } 
  87.  
  88.  
  89. .dialog .bottom{ 
  90. /*
  91. 设置文本向右对齐
  92. 设置内边局 上右下左
  93. */
  94. text-align: right; 
  95. padding: 10 10 10 0; 
  96. background: #eee; 
  97. } 
  98.  
  99. .mask{ 
  100. /*
  101. 里面有个display：no；
  102. 开始的时候看不到这个div的效果它主要作用是封闭整个页面
  103. */
  104. width: 100%; 
  105. height: 100%; 
  106. background: #000; 
  107. position: absolute; 
  108. top: 0px; 
  109. left: 0px; 
  110. display: none; 
  111. z-index: 100; 
  112.  
  113. } 
  114. .btn{ 
  115.  
  116. border: #666 1px solid; 
  117. width: 65px; 
  118.  
  119. } 
  120.  
  121. </style>
  122. <script type="text/javascript">
  123.  
  124. // JavaScript Document$(function(){ 
  125.  
  126. //绑定删除按钮的触发事件 
  127.  
  128. $(document).ready(function(){
  129. //按下按钮触发操作
  130. $("#button1").click(function(){ 
  131. //设置 div 元素的不透明级别：透明度取值(取值范围[0.0,1.0])
  132. $(".mask").css("opacity","0.3").show(); 
  133. //制作对话框
  134. showDialog(); 
  135. //展现css的特效
  136. $(".dialog").show(); 
  137.  
  138. });
  139.  
  140.  
  141. //当页面窗口大小改变时触发的事件 
  142. $(window).resize(function(){ 
  143.  
  144. if(!$(".dialog").is(":visible")){ 
  145. return; 
  146. } 
  147. showDialog(); 
  148. }); 
  149.  
  150. //注册关闭图片单击事件 
  151. $(".title img").click(function(){ 
  152. //隐藏效果
  153. $(".dialog").hide(); 
  154. $(".mask").hide(); 
  155.  
  156. }); 
  157. //取消按钮事件 
  158. $("#noOk").click(function(){ 
  159. $(".dialog").hide(); 
  160. $(".mask").hide(); 
  161. }); 
  162.  
  163. //确定按钮事假 
  164. $("#ok").click(function(){ 
  165. $(".dialog").hide(); 
  166. $(".mask").hide(); 
  167.  
  168. if($("input:checked").length !=0){ 
  169. //注意过滤器选择器中间不能存在空格$("input :checked")这样是错误的 
  170. $(".divShow").remove();//删除某条数据 
  171. } 
  172.  
  173. }); 
  174. });
  175. /* 
  176. * 根据当前页面于滚动条的位置，设置提示对话框的TOP和left 
  177. */ 
  178. function showDialog(){ 
  179. var objw=$(window);//获取当前窗口 
  180. var objc=$(".dialog");//获取当前对话框 
  181. var brsw=objw.width(); //获取页面宽度
  182. var brsh=objw.height(); //获取页面高度
  183. var sclL=objw.scrollLeft(); //获取页面左滑动条信息
  184. var sclT=objw.scrollTop(); 
  185. var curw=objc.width(); //获取对话框宽度
  186. var curh=objc.height(); //获取对话框高度
  187.  
  188. var left=sclL+(brsw -curw)/2; //计算对话框居中时的左边距 
  189. var top=sclT+(brsh-curh)/2; //计算对话框居中时的上边距 
  190.  
  191.  
  192. objc.css({"left":left,"top":top}); //设置对话框居中 
  193.  
  194. }
  195. </script> 
  196. </head>
  197.  
  198. <body>
  199. <div class="divShow"> 
  200. <input type="checkbox" id="chexkBox1"> <a href="#">这是一条可以删除的记录</a> 
  201. <input id="button1" type="button" value="删除" class="btn"> 
  202. </div> 
  203.  
  204.  
  205. <div class="mask"></div> 
  206. <div class="dialog">
  207.  
  208. <div class="title"> 
  209. <img alt="点击可以关闭" src="" width="20px" height="20px;"> 
  210. 删除时提示
  211. </div> 
  212.  
  213. <div class="content"> 
  214. <img alt="" src="" width="60px" height="60px"> 
  215. <span>你真的要删除这条记录吗？</span>
  216. </div> 
  217.  
  218. <div class="bottom"> 
  219. <input type="button" id="ok" value="确定" class="btn"> 
  220. <input type="button" id="noOk" value="取消" class="btn"> 
  221. </div> 
  222.  
  223. </div> 
  224.  
  225. </body> 
  226. </html>



如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (3058人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号