html点击按钮后，显示层，锁定背景

最新推荐文章于 2022-06-18 17:36:47 发布

eddie

最新推荐文章于 2022-06-18 17:36:47 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： JavaScript HTML

本文链接：https://blog.csdn.net/eddie_520/article/details/8909030

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

注：本技术采用jquery，所以在用的时候记得引入jquery库

html代码

<body>

</body>

js 代码

//获取说明数据
   function operGroup(){
       var format =
           "       <div class=\"add_grouped\" id=\"posBlock\" >"+
           "       <div class=\"title clearfix\"><i style=\"float:left;\" class=\"add\"></i><span style=\"float:left;\" class=\"\">新增分组</span></div>"+
           "           <table cellpadding=\"0\" cellspacing=\"0\" style=\"border:0px;\" class=\"grid_table1\" "+
           "           <tbody style=\"border:0px;\" ><tr style=\"border:0px;\" ><td style=\"border:0px;\" >"+
           "           <div class=\"box\" align=\"center\">"+
           "           组别名称：<input type=\"text\" id=\"groupNameValue\"/><br/><br/>"+
           "           排      序：<input type=\"text\" id=\"groupSequenceValue\"/>"+
           "           <dd>"+
           "           <ul>"+
           "           <li class=\"btn\"><button οnclick=\"save('add',0)\">保存</button><button class=\"cancel\" id=\"btnCloseExplain\" >取消</button></li>"+
           "               </ul>"+
           "               </dd>"+
           "           </div>"+
           "           </td></tr></tbody>"+
           "           </table>"+
           "       </div>";

       $("#explain-pop").html(format);


       showExplainDialog();

       $("#btnCloseExplain").unbind('click');
       $("#btnCloseExplain").click(function(){
           $("#explain-pop").hide();
           $(".overlay").hide();
       });

   }



   //弹出说明对话框
   function showExplainDialog(){
       showOverlay();
       adjust("explain-pop");
       $("#explain-pop").show();
   }



   function showOverlay(){
       $(".overlay").height(pageHeight());
       $(".overlay").width(pageWidth());
       $(".overlay").show();
   }

   /* 定位到页面中心 */
   function adjust(id) {
         var w = $("#"+id).width();
         var h = $("#"+id).height();

         var t = scrollY() + (windowHeight()/2) - (h/2);
         if(t < 0) t = 0;

         var l = scrollX() + (windowWidth()/2) - (w/2);
         if(l < 0) l = 0;

         $("#"+id).css({left: l+'px', top: t+'px'});
   }

   //浏览器视口的高度
   function windowHeight() {
         var de = document.documentElement;

         return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
   }

   //浏览器视口的宽度
   function windowWidth() {
       var de = document.documentElement;

       return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
   }

   /* 浏览器垂直滚动位置 */
   function scrollY() {
       var de = document.documentElement;

       return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
   }

   /* 浏览器水平滚动位置 */
   function scrollX() {
       var de = document.documentElement;

       return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
   }
   /* 当前页面高度 */
   function pageHeight() {
       var scrollHeight = document.body.scrollHeight;
       var winHeight = windowHeight();
       return scrollHeight > winHeight ? scrollHeight : winHeight;
   }

   /* 当前页面宽度 */
   function pageWidth() {
       var scrollWidth = document.body.scrollWidth;
       var winWidth = windowWidth();
       return scrollWidth > winWidth ? scrollWidth : winWidth;
   }