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



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

发表评论 (3058人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

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

其它栏目

· 建站教程
· 365学习

业务咨询

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

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

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