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

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

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

一种:

<a href="JavaScript:if(confirm('确实要删除该内容吗?')){location='http://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>



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


发表评论 (1779人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------