js/jquery/layui 彈出確認 確認取消對話框的實現(xiàn)方法
一種：
<a href="javascript:if(confirm('確實要刪除該內(nèi)容嗎?')){location='http://theartemis.cn'}">彈出窗口</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() <!--調(diào)用方法-->
{
event.returnValue = confirm("刪除是不可恢復的，你確認要刪除嗎？");
}
</script>
方法一講解：
分解成三部分來看：
<a href="javascript: // ">表示點擊超鏈接后執(zhí)行相應的javascript代碼。
confirm() 表示一個要求確認的對話框，用戶點擊確定返回true，取消則返回false。
if(confirm())則表示，如果用戶選擇了確定，則執(zhí)行if代碼，否則什么也不做。
五種：Layui 彈框的 實現(xiàn)，可以利用彈框的確定取消按鈕
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實現(xiàn)單擊按鈕遮罩彈出對話框:
<!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寬度
左內(nèi)距為10px
*/
line-height: 50px;
height: 60px;
background-color: #dddddd;
width: 300px;
padding-left: 15px;
}
.dialog{
/*
設置寬度
設置邊框?qū)挾?顏色+引
display：none表示影藏
z-index：//保證該層在最上面顯示
*/
width: 360px;
border: 10px #fff solid;
position: absolute;
display: none;
z-index: 101;
}
.dialog .title{
/*
設置背景色
設置內(nèi)邊距
設置字體顏色
設置字體加粗
*/
background:#fbaf15;
padding: 10px;
color: #fff;
font-weight: bold;
}
.dialog .title img{
/*
設置元素向右浮動
*/
float:right;
}
.dialog .content{
/*
設置背景色
設置內(nèi)邊距
設置高度
*/
background: #fff;
padding: 25px;
height: 60px;
}
.dialog .content img{
float: left;
}
.dialog .content span{
float: left;
padding: 10px;
}
.dialog .bottom{
/*
設置文本向右對齊
設置內(nèi)邊局 上右下左
*/
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(){
//綁定刪除按鈕的觸發(fā)事件
$(document).ready(function(){
//按下按鈕觸發(fā)操作
$("#button1").click(function(){
//設置 div 元素的不透明級別：透明度取值(取值范圍[0.0,1.0])
$(".mask").css("opacity","0.3").show();
//制作對話框
showDialog();
//展現(xiàn)css的特效
$(".dialog").show();
});
//當頁面窗口大小改變時觸發(fā)的事件
$(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();//刪除某條數(shù)據(jù)
}
});
});
/*
* 根據(jù)當前頁面于滾動條的位置，設置提示對話框的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(); //獲取對話框?qū)挾?
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>如對本文有疑問，請?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會為你解答?。?點擊進入論壇
