文档中心    工具中心
万户网络知识库 > js效果 > js实现简单的窗口弹出

js实现简单的窗口弹出

更新时间:2019-03-07 14:54:22    访问量:

案例地址:

http://gz.gzwhir.com/szsxmy201611099106/member/Register.aspx


效果:



如何实现:

//以下是点击按钮

<span class="wb_01">点击上面注册按钮,即表示你同意</span>
<p class="wb_02"><a class="protocol-btn" href="javascript:void(0)">《美宜多许可及服务协议》</a></p>

//以下是信息展示窗口

<div class="protocol-box">
   <div class="close">×</div>
   <div class="contbox">
      <div class="ti">《美宜多许可及服务协议》</div>
      <div class="txtbox">
         <wtl:inforarea ColumnID="73">{$Content}</wtl:inforarea>
      </div>
     </div>

</div>


//js

<script>
   //注册协议
   $(".protocol-btn").click(function(){
          $(".protocol-box").show();  //显示窗口
          var wH = $(window).height();
          var bH = $(".protocol-box .contbox").outerHeight(true);
          $(".protocol-box .contbox").css("margin-top",(wH-bH)/2); //设置上下居中
   });
   

   //关闭窗口
   $(".protocol-box .close").click(function(){
       $(".protocol-box").hide();
   });
</script>

更多文档中心

更多工具中心

以上内容是否对您有帮助?

在文档使用中是否遇到以下问题

更多建议

Top