jQuery扩展插件弹出层

最新推荐文章于 2017-11-06 15:08:00 发布

快乐de馒头

最新推荐文章于 2017-11-06 15:08:00 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/47152519

版权

<pre name="code" class="html"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 </head>
 <body>

 <a id="btn" href="###">关闭</a>

 <div id="lay">a</div>

 <script type="text/javascript">

  (function($){
       var layer=function(){
          this.settings = {
           'size':20,
           'width':'500px',
           'height':'300px',
           'bgcolor':'red',
           'margin':'20px 0px 0px 100px',
           'clsoebtn':'#btn'
          };
          this.closediv=function(){
          }
       };

      var layer=new layer();
      $.fn.layerdiv=function(options){
           var obj=$(this);
           var params=$.extend( layer.settings, options);
           $(params.clsoebtn).click(function(){
            $(obj).css('display','none');
           });
           return this.each(function(){
            $(this).css({'font-size':params.size,'width':params.width,'height':params.height,'background-color':params.bgcolor,'margin':params.margin,'display':'none'});
            $(this).slideDown("slow");
            var $this=obj;
            });
      }

   })(jQuery);


$('#lay').layerdiv({
  'bgcolor':'#ccc',
  'margin':'200px auto'
});



 </script>
 </body>
</html>