jquery實現彈出確認是否刪除的一個簡單代碼
如下是一個jquery寫的實現彈出是否刪除數據的簡單的代碼javascript
<!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>
<title>刪除記錄時的提示效果</title>
<script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> </script>
<script type="text/javascript" src="Jscript/jquery-1.4.2.js"> </script>
<style type="text/css"> body{font-size:13px} .divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px} .divShow span{padding-left:50px} .dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101} .dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold} .dialog .title img{float:right} .dialog .content{background-color:#fff;padding:25px;height:60px} .dialog .content img{float:left} .dialog .content span{float:left;padding-top:10px;padding-left:10px} .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee} .mask {width:100%;height:100%; background-color:rgba(0,0,0,0.4);position:absolute; top:0px;left:0px;display:none;z-index:100} .btn {border:#666 1px solid;padding:2px;width:65px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style>
<script type="text/javascript"> $(function() { $("#Button1").click(function() { //註冊刪除按鈕點擊事件 $(".mask").show(); //顯示背景色 showDialog(); //設置提示對話框的Top與Left $(".dialog").show(); //顯示提示對話框 }) /* *根據當前頁面與滾動條位置，設置提示對話框的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 }); } $(window).resize(function() {//頁面窗口大小改變事件 if (!$(".dialog").is(":visible")) { return; } showDialog(); //設置提示對話框的Top與Left }); $(".title img").click(function() { //註冊關閉圖片點擊事件 $(".dialog").hide(); $(".mask").hide(); }) $("#Button3").click(function() {//註冊取消按鈕點擊事件 $(".dialog").hide(); $(".mask").hide(); }) $("#Button2").click(function() {//註冊肯定按鈕點擊事件 $(".dialog").hide(); $(".mask").hide(); if ($("input:checked").length != 0) {//若是選擇了刪除行 $(".divShow").remove(); //刪除某行數據 } }) }) </script>
</head>
<body>
<div class="divShow">
<input id="Checkbox1" type="checkbox" />
<a href="#">這是一條可刪除的記錄</a>
<span>
<input id="Button1" type="button" value="刪除" class="btn" />
</span>
</div>
<div class="mask"></div>
<div class="dialog">
<div class="title">
<img src="Images/close.gif" alt="點擊能夠關閉" />刪除時提示
</div>
<div class="content">
<img src="Images/delete.jpg" alt="" /><span>您真的要刪除該條記錄嗎？</span>
</div>
<div class="bottom">
<input id="Button2" type="button" value="肯定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
</body>
</html>
相關文章
- 1. swal()彈出刪除確認框
- 2. javascript刪除提示彈出況確認
- 3. ABAP 實現彈出是否確認對話框
- 4. 刪除前添加確認刪除彈出框
- 5. vscode 如果設置是否二次確認是否刪除
- 6. jquery刪除table的某一行元素 刪除前confirm確認
- 7. jquery實現簡單彈出框
- 8. JS加HTML實現彈窗提示是否確認提交
- 9. jQuery 實現 bootstrap 模態框 刪除確認
- 10. jquery 漂亮的刪除確認和提交無刷新刪除
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • jQuery Mobile 彈窗 - jQuery Mobile 教程
- • ☆基於Java Instrument的Agent實現
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
