提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery制作居中遮罩层效果分享

jQuery 分享 效果 制作 居中 遮罩
2023-06-13 09:15:18 时间

复制代码代码如下:


<!DOCTYPEHTML>
<htmllang=zh-cn>
<head>
<metacharset=utf-8>
<title>遮罩演练</title>
<linkhref="../css/component2.css"rel="Stylesheet"/>
<scriptsrc="../js/jquery-1.11.0.min.js"></script>
<scriptsrc="../js/shadow.js"></script>
</head>
<body>
<divclass="left-containerlayout-container">
   <ulclass="topic-title">
       <li>
           <spanclass="fun">++++</span>
       </li>
   </ul>
</div>
<divclass="right-containerlayout-container">

</div>
<divstyle="display:none">
   <divclass="topic-input-div"id="content-container-templet">
       <ul class="topic-input-ul">
           <liclass="input-li"><inputtype="text"style="width:100%;line-height:2em" placeholder="请输入标题"/></li>
           <liclass="btn-li"><buttonclass="sure">确定</button></li>
           <liclass="btn-li"><buttonclass="cancel">取消</button></li>
       </ul>
   </div>
</div>
</body>
<scripttype="text/javascript">
   $(document).ready(function(){
       $(".fun").on("click",function(){
           console.log("funclick");
           showAddTopic(function(val){
               console.log(val);
           });
       });
   });
</script>
</html>

shadow.js

复制代码代码如下:

shadow_list=[];
functionshowAddTopic(cb){
   varinput_container=$("#content-container-templet").clone();
   input_container.removeAttr("id");
    varshadow=$("<div/>").addClass("shadow-wrapper").append(input_container);
    shadow.appendTo(document.body);
    shadow_list.push(shadow);
    $(".sure",shadow).on("click",function(){
        varval=$(".input-liinput",shadow).val();
        cb(val);
        hideAddTopic();
    });
    $(".cancel",shadow).on("click",function(){
        hideAddTopic();
    });
}

functionhideAddTopic(){
   if(shadow_list.length>0){
       varshadow=shadow_list.pop();
       shadow.remove();
   }
}

component2.css

复制代码代码如下:
html,body{
       padding:0px;
       margin:0px;
       width:100%;
       height:100%;
       overflow:hidden;
   }
   ul,li{
       padding:0px;
       margin:0px;
       list-style:none;
   }
  input,textarea{
   vertical-align:middle;
   border:none;
  }
   .layout-container{
       position:absolute;
       top:0px;
       height:100%;
       overflow:auto;
   }
  .left-container{
      left:0px;
      width:20%;
      border:solid5px#52BE7F;
  }
  .right-container{
      right:0px;
      width:80%;
  }
  .shadow-wrapper{
      position:absolute;
      width:100%;
      height:100%;
  }
  .topic-titleli span{
      height:30px;
      line-height:30px;
      vertical-align:middle;
  }
  .topic-title .fun{
      float:right;
  }
  .topic-input-div{
      position:absolute;
      left:50%;
      top:50%;
      height:200px;
      width:400px;
      margin-top:-120px;
      margin-left:-210px;
      padding:20px10px;
  }
  .topic-input-ul{
      vertical-align:middle;
      position:absolute;
      width:380px;
      height:2em;
      left:50%;
      top:50%;
      margin-top:-1em;
      margin-left:-190px;
  }
   .topic-input-ulli{
       line-height:2em;

       display:inline-block;
        *display:inline;
  }
  .topic-input-ul.input-li{
      width:40%;
  }
  .topic-input-ul.btn-li{
      width:15%;
  }

相关文章