一种:
<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
- 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实现单击按钮遮罩弹出对话框:
</>code
- <!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>
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛