【jQuery】jQuery中的事件处理 —— 示例

最新推荐文章于 2021-05-18 10:56:50 发布

王晓斌

最新推荐文章于 2021-05-18 10:56:50 发布

阅读量687

点赞数

分类专栏： JS.jQuery/jqGrid 文章标签： jQuery

本文链接：https://blog.csdn.net/robinjwong/article/details/40844427

版权

JS.jQuery/jqGrid 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

示例

删除数据时，提示对话框：

delete.html:

<html>  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
  <script language="javascript" type="text/javascript"  
           src="Jscript/jquery-1.11.1.js">  
  </script>
  <style>
    body{font-size: 13px}
    .divShow{line-height: 32px;height: 32px;background-color: #eee;width: 200px;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:#000; position: absolute;top: 0px;
          opacity:0.7;display: none;z-index: 100}
    .btn{border: #666 1px solid;padding: 2px;width: 65px;}
  </style>  
  <script type="text/javascript">  
        $(function(){
            $("#Button1").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();
            })

            $("#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="Image/close.gif" alt="点击可关闭" />删除时提示
    </div>
    <div class="content">
      <img src="Image/delete.gif" 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>