JGUI源碼：實現蒙版層顯示(18)

時間 2019-12-12

標籤 jgui 源碼實現顯示简体版

原文原文鏈接

有的時候須要顯示一個蒙版層，蒙版層顯示的主要原理是在指定元素好比div上建立一個子元素div，設置absolute、寬高100%、設置z-index置於頂層，設置半透明效果，fadein,fadeout便可。以下一段簡單代碼便可實現。javascript

 <body>
    <div>這是mask界面顯示代碼</div>
    <div id="test" style="background-color:#124567;color:white;width:100px">點擊彈出</div>
    <script type="text/javascript">
      function showMask()
      {
        var topWin=(function(){ var p=window.parent; while(p!=p.window.parent){p=p.window.parent;} return p; })();//獲取頂層窗口
        var topwindowbody=topWin.document.body;//獲取頂層窗口的body元素
        $(topwindowbody).append(
          '<div class="jgui-mask" style="position:absolute;width: 100%;height: 100%;;z-index:1000;background-color: #000;opacity: 0;"></div>'
        );
        $(".jgui-mask",topwindowbody).fadeIn(0, function(){//顯示
          $(this).fadeTo('fast', 0.5);//從全透明到半透明
        });
        $(".jgui-mask",topwindowbody)
            .unbind("click")
            .click(function() {
              $(this).fadeOut("fast", 0, function() {//隱藏
                $(this).remove();
              });
            });
      }
      $(function() {
        $("#test").click(function() {
          showMask();
        });
      });
    </script>
  </body>