zoukankan      html  css  js  c++  java
  • jquery删除记录弹出提示框

    来自于《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=utf-8" />
    <title>jQuery</title>
    <style type="text/css">
    body,div,ul,li{margin: 0;padding: 0; font-size: 13px;}
    ul{list-style-type: none;}
    .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 0;background-color: #eee;}
    .mask{width: 100%;height: 100%;background-color: #000;position: absolute;top: 0px;left: 0px;filter:alpha(opacity=30);opacity:0.3;display: none;z-index: 100;}
    .btn{border: solid 1px #666;padding: 2px;width: 65px;filter:progid:DXImageTransform:Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);}
    
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    
    $(function(){
        $("#btn1").click(function(){
            $(".mask").show();
            showDialog();
            $(".dialog").show();
        });
    
        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();
        });
    
        $(".title img").click(function(){
            $(".dialog").hide();
            $(".mask").hide();
        });
    
        $("#btn3").click(function(){
            $(".dialog").hide();
            $(".mask").hide();
        });
    
        $("#btn2").click(function(){
            $(".dialog").hide();
            $(".mask").hide();
            if($("input:checked").length != 0){
                $(".divShow").remove();
            }
        });
    
    });
    
    </script>
    </head>
    <body>
    
    <div class="divShow">
        <input type="checkbox" id="chb1" />
        <a href="#">可以删除的记录</a>
        <span><input id="btn1" 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"><span>是否确定删除该记录?</span></div>
        <div class="bottom">
            <input id="btn2" type="button" value="确定" class="btn" />
            <input id="btn3" type="button" value="取消" class="btn" />
        </div>
    </div>
    
    
    </body>
    </html>
  • 相关阅读:
    新概念第二册(1)--英语口语听力课1
    外企面试课程(一)---熟悉常见的缩略词
    公司 邮件 翻译 培训 长难句 结课
    workflow
    公司 邮件 翻译 培训 长难句 20
    公司 邮件 翻译 培训 长难句 19
    Engineering Management
    公司 邮件 翻译 培训 长难句 18
    公司 邮件 翻译 培训 长难句 17
    第14.5节 利用浏览器获取的http信息构造Python网页访问的http请求头
  • 原文地址:https://www.cnblogs.com/phpway/p/3484873.html
Copyright © 2011-2022 走看看