zoukankan      html  css  js  c++  java
  • jQuery遮罩层小插件

    CSS:

    <style type="text/css">
    body,html{padding:0;margin:0;}
    .overlayer{background: #000;opacity: 0.5;filter:alpha(opacity=50);position: fixed;top: 0;left: 0;z-index: 1;}
    .dialog{position: absolute; 300px;height: 300px;left: 50%;top:50%;margin-left: -150px;margin-top: -150px;z-index: 2;
    border:1px solid #9bdf70; background:#f0fbeb;border-radius: 8px;}
    .dialog img{margin: 30px auto 0;display: block;border: 5px solid #fff000;}
    .dialog .close{position: absolute;top: 10px;right: 10px; 50px;height: 16px;font-size: 14px;color: #000;border:1px solid #ffcc00; background:#fffff7;border-radius: 3px;text-align: center;cursor: pointer;}
    .dialog a{color: #000;font-size: 12px;display: block;text-align: center;margin: 10px auto;padding:3px;text-decoration: none;}
    </style>

    HTML:

    <input type="button" value="弹层" id="btn" />
    <div id="dialog" class="dialog" style="display:none;">
      <div id="close" class="close">X</div>
      <img src="me.jpg" alt="" width="145" height="200" />
      <a href="javascript:;">显哥哥,亲一个`(*∩_∩*)′</a>
    </div>

    <input type="button" value="弹层1" id="btn1" />
    <div id="dialog1" class="dialog" style="display:none;">
      <div id="close1" class="close">X</div>
      <img src="me.jpg" alt="" width="145" height="200" />
      <a href="javascript:;">宝贝,亲一个`(*∩_∩*)′</a>
    </div>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.overlay.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $.overlay();
    $.overlay({
    $clickId : $("#btn1"),
    $contentId : $("#dialog1"),
    $closeId : $("#close1")
    });
    });
    </script>

    jquery.overlay.js:

    /*
    *Author: 楚玉
    *Date: 2013.06.10
    *for: personnal
    */
    ;(function($){
      $.overlay = function(param){

      /*clickId 
      **contentId 
      **closeId
      */

      /*默认参数*/

      $.overlay.defaults = {
        $clickId : $("#btn"),
        $contentId : $("#dialog"),
        $closeId : $("#close")
      };

      var opts = $.extend({},$.overlay.defaults,param),
        clickEle = opts.$clickId,
        contentEle = opts.$contentId,
        closeEle = opts.$closeId;

      //点击触发
      clickEle.bind("click",function(){
        showDialog();
        showLayer();
      });

      //关闭按钮
      closeEle.bind("click",function(){
        removeOverlay();
        contentEle.hide();
      });

      $(window).resize(function(){
        sizeLayer("overlay");
      });

      function showDialog(){
        contentEle.css("display","block");
      }

      function showLayer(){
        var overlay = $("<div id='overlayer' class='overlayer'></div>");
        $("body").append(overlay);
        sizeLayer("overlayer");
      }

      function sizeLayer(id){
        var _width = $(document).width(),
          _height = $(document).height();
        $("#" + id).css({"width":_width,"height":_height});
      }

      function removeOverlay(){
        $("#overlayer").remove();
      }

    }
    })(jQuery)

      

      注意点:

      一:

        var opts = $.extend({},$.overlay.defaults,param),是继承的一种方式,在jQuery插件中普遍被使用。(js中有原型继承,call,apply继承)。

      二:

        $.overlay.defaults必须写在前面,否则undefined。

      三:

        还有var a = 1, b = 2;中间使用逗号相隔,知识是知道的。通常写的时候不注意就错了,还要慢慢看。昨天那个if()判断==写成了=赋值 0.0

  • 相关阅读:
    185. [USACO Oct08] 挖水井
    JavaEE Tutorials (9)
    vjudge A
    HDU 2089 不要62
    国庆 day 2 下午
    国庆 day 2 上午
    国庆 day 1 下午
    P2899 [USACO08JAN]手机网络Cell Phone Network
    洛谷 P1690 贪婪的Copy
    洛谷 P2209 [USACO13OPEN]燃油经济性Fuel Economy
  • 原文地址:https://www.cnblogs.com/chuyu/p/3131132.html
Copyright © 2011-2022 走看看