jQuery弹出层

最新推荐文章于 2021-04-15 17:37:45 发布
原创 最新推荐文章于 2021-04-15 17:37:45 发布 · 206 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery #CSS #prototype #Microsoft #XHTML #ViewUI

jQueryPopup.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>基于jQuery弹出层有9种效果-懒人建站</title>
<meta name="keywords" content="网页特效,网页模板,导航菜单,焦点幻灯片,JS代码" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，JS广告代码，网页特效，导航菜单，焦点幻灯片代码，原创视频教程与网页模板和CSS技巧。" />
    <link href="styles/core.css" type="text/css" rel="stylesheet"/>
    <script src="scripts/jquery-1.3.min.js" type="text/javascript" language="javascript"></script>
    <script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>
    <script language="javascript">
  $(document).ready(function() {
   //示例1，默认弹出层
   new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});
   //示例2，弹出层位置可偏移
   new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",
    offsets:{
     x:102,
     y:-41
    }
   });
   //示例3，使用弹出层默认特效
   new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});
   //示例4，使用弹出层特效，并重载特效
   var t4 =  new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});
   t4.doEffects = function(way){
    way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
   };
   //示例5，使用自定义样式，给最外层容器套上一个class,然后在css定义即可
   new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});

   //示例6，使用遮罩
   new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});
   //示例7，使用不同的事件来触发
   new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});
   //示例8，使用自定义事件
   new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",
    onBeforeStart:function(){
     this.isDoPopup = false;
     setTimeout(function(){this.isDoPopup = true}.binding(this),5000);
    }
   });
   //示例9，综合效果
   var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",useOverlay:true,useFx:true,
    offsets:{
     x:0,
     y:-41
    }
   });
   t9.doEffects = function(way){
    if(way == "open"){
     this.popupLayer.css({opacity:0.3}).show(400,function(){
      this.popupLayer.animate({
       left:($(document).width() - this.popupLayer.width())/2,
       top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
       opacity:0.8
      },1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
     }.binding(this));
    }
    else{
     this.popupLayer.animate({
      left:this.trigger.offset().left,
      top:this.trigger.offset().top,
      opacity:0.1
     },{duration:500,complete:function(){this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
    }
   }
  });
 </script>
</head>
<body>
 <h1>基于jQuery弹出层有9种效果</h1>
 <div id="emample1" class="example">
        <div id="ele1" class="tigger">触发元素1</div><div class="description">示例1：默认弹出层,只须传入触发元素、弹出层、关闭按钮的jquery对象或#ID，其中关闭按钮为可选项。<br />new PopupLayer({trigger:"#ele1",popupBlk:"#blk1",closeBtn:"#close1"});</div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk1" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例1，默认弹出层</h2>
                <a href="javascript:void(0)" id="close1" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample2" class="example">
        <div id="ele2" class="tigger">触发元素2</div><div class="description">示例2：参数offsets可设置弹出层位置偏移量，让弹出层的位置随心所欲<br />new PopupLayer({trigger:"#ele2",popupBlk:"#blk2",closeBtn:"#close2",offsets:{x:102,y:-41}});</div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk2" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例2，弹出层位置可偏移</h2>
                <a href="javascript:void(0)" id="close2" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample3" class="example">
        <div id="ele3" class="tigger">触发元素3</div><div class="description">示例3：useFx设置为true即可使用弹出层默认特效<br />new PopupLayer({trigger:"#ele3",popupBlk:"#blk3",closeBtn:"#close3",useFx:true});</div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk3" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例3，使用弹出层特效</h2>
                <a href="javascript:void(0)" id="close3" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample4" class="example">
        <div id="ele4" class="tigger">触发元素4</div><div class="description">示例4：使用弹出层特效，重载特效函数来完成自定义特效<br />var t4 =  new PopupLayer({trigger:"#ele4",popupBlk:"#blk4",closeBtn:"#close4",useFx:true});<br />
        t4.doEffects = function(way){<br />    
        way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");<br />}
        </div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk4" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例4，使用弹出层特效，并重载特效</h2>
                <a href="javascript:void(0)" id="close4" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample5" class="example">
        <div id="ele5" class="tigger">触发元素5</div><div class="description">示例5：在弹出层容器上加上自定义的class<br />new PopupLayer({trigger:"#ele5",popupBlk:"#blk5",closeBtn:"#close5",popupLayerClass:"t5"});</div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk5" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例5,使用自定义样式</h2>
                <a href="javascript:void(0)" id="close5" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample6" class="example">
        <div id="ele6" class="tigger">触发元素6</div><div class="description">示例6：useOverlay设置为true即可在弹出层后使用遮罩<br />new PopupLayer({trigger:"#ele6",popupBlk:"#blk6",closeBtn:"#close6",useOverlay:true});</div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk6" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例6,使用遮罩</h2>
                <a href="javascript:void(0)" id="close6" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample7" class="example">
        <div id="ele7" class="tigger">触发元素7</div><div class="description">示例7：eventType为事件触发类型，表示以何种方式触发弹出层<br />new PopupLayer({trigger:"#ele7",popupBlk:"#blk7",closeBtn:"#close7",eventType:"mouseover"});</div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk7" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例7,使用不同的事件来触发</h2>
                <a href="javascript:void(0)" id="close7" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample8" class="example">
        <div id="ele8" class="tigger">触发元素8</div><div class="description">示例8：自定义事件，onBeforeStart在触发弹出前做一些自己想做的事。<br />这里我做的事是：在dom加载完成后，延迟5秒才能使用弹出层。（提示：可refresh页面看效果）<br />new PopupLayer({trigger:"#ele8",popupBlk:"#blk8",closeBtn:"#close8",<br />    
    onBeforeStart:function(){<br />        
     this.isDoPopup = false;<br />        
     setTimeout(function(){this.isDoPopup = true}.binding(this),5000);<br />    
    }<br />});
        </div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk8" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例8，使用自定义事件</h2>
                <a href="javascript:void(0)" id="close8" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="emample9" class="example">
        <div id="ele9" class="tigger">触发元素9</div><div class="description">示例9：综合效果<br />var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",<br />useOverlay:true,useFx:true,offsets:{x:0,y:-41}});<br />
t9.doEffects = function(way){<br />
    if(way == "open"){<br />
        this.popupLayer.css({opacity:0.3}).show(400,function(){<br />
            this.popupLayer.animate({<br />
                left:($(document).width() - this.popupLayer.width())/2,<br />
                top:(document.documentElement.clientHeight -<br />
                    this.popupLayer.height())/2 + $(document).scrollTop(),<br />
                opacity:0.8<br />
            },1000,function(){this.popupLayer.css("opacity",1)}.binding(this));<br />
        }.binding(this));<br />
    }<br />
    else{<br />
        this.popupLayer.animate({<br />
            left:this.trigger.offset().left,<br />
            top:this.trigger.offset().top,<br />
            opacity:0.1<br />
        },{duration:500,complete:function(){<br />            this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});<br />
    }<br />
}<br /></div>
        <div class="clr"></div>
        <select>
         <option>ie6下能罩住我吗？</option>
        </select>
        <div id="blk9" class="blk" style="display:none;">
            <div class="head"><div class="head-right"></div></div>
            <div class="main">
                <h2>示例9,综合效果</h2>
                <a href="javascript:void(0)" id="close9" class="closeBtn">关闭</a>
                <ul>
                    <li><a href="#">项目1</a></li>
                    <li><a href="#">项目2</a></li>
                    <li><a href="#">项目3</a></li>
                    <li><a href="#">项目4</a></li>
                    <li><a href="#">项目5</a></li>
                    <li><a href="#">项目6</a></li>
                    <li><a href="#">项目7</a></li>
                    <li><a href="#">项目8</a></li>
                    <li><a href="#">项目9</a></li>
                    <li><a href="#">项目10</a></li>
                    <li><a href="#">项目11</a></li>
                    <li><a href="#">项目12</a></li>
                </ul>
            </div>
            <div class="foot"><div class="foot-right"></div></div>
        </div>
    </div>
    <div id="blk10" class="blk" style="display:none;">
        <div class="head"><div class="head-right"></div></div>
        <div class="main">
            <h2>示例10,永远在中间的层</h2>
            <a href="javascript:void(0)" id="close10" class="closeBtn">关闭</a>
            <ul>
                <li><a href="#">项目1</a></li>
                <li><a href="#">项目2</a></li>
                <li><a href="#">项目3</a></li>
                <li><a href="#">项目4</a></li>
                <li><a href="#">项目5</a></li>
                <li><a href="#">项目6</a></li>
                <li><a href="#">项目7</a></li>
                <li><a href="#">项目8</a></li>
                <li><a href="#">项目9</a></li>
                <li><a href="#">项目10</a></li>
                <li><a href="#">项目11</a></li>
                <li><a href="#">项目12</a></li>
            </ul>
        </div>
        <div class="foot"><div class="foot-right"></div></div>
    </div>

</body>
</html>

popup_layer.js代码如下：
Function.prototype.binding = function() {
    if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;
    var __method = this, args = jQuery.makeArray(arguments), object = args.shift();
    return function() {
        return __method.apply(object, args.concat(jQuery.makeArray(arguments)));
    }
}

var Class = function(subclass){
    subclass.setOptions = function(options){
        this.options = jQuery.extend({}, this.options,options);
        for(var key in options){
            if(/^on[A-Z][A-Za-z]*$/.test(key)){
                $(this).bind(key,options[key]);
            }
        }
    }
    var fn =  function(){
        if(subclass._init && typeof subclass._init == 'function'){
            this._init.apply(this,arguments);
        }
    }
    if(typeof subclass == 'object'){
        fn.prototype = subclass;
    }
    return fn;
}
var PopupLayer = new Class({
    options:{
        trigger:null,                           
        popupBlk:null,                          
        closeBtn:null,                          
        closeLayout:null,
        popupLayerClass:"popupLayer",           
        eventType:"click",                      
        offsets:{                               
            x:0,
            y:0
        },
        useFx:false,                            
        useOverlay:false,                       
        usePopupIframe:true,                    
        isresize:true,                          
        onBeforeShow:function(){},
        onBeforeStart:function(){}           
    },
    _init:function(options){
        this.setOptions(options);               
        this.isSetPosition = this.isDoPopup = this.isOverlay = true;   
        this.popupLayer = $(document.createElement_x("div")).addClass(this.options.popupLayerClass);     //初始化最外层容器
        this.popupIframe = $(document.createElement_x("iframe")).attr({border:0,frameborder:0});         //容器遮罩,用于屏蔽ie6下的select
        this.trigger = $(this.options.trigger);                         //把触发元素封装成实例的一个属性，方便使用及理解
        this.popupBlk = $(this.options.popupBlk);                       //把弹出内容层元素封装成实例的一个属性
        this.closeBtn = $(this.options.closeBtn);                       //把关闭按钮素封装成实例的一个属性
        this.closeLayout=$(this.options.closeLayout);                   
        $(this).trigger("onBeforeStart");                               //执行自定义事件。
        this._construct()                                               //通过弹出内容层，构造弹出层，即为其添加外层容器及底层iframe
        this.trigger.bind(this.options.eventType,function(){            //给触发元素绑定触发事件
                    $(this).trigger("onBeforeShow");                        //取代隐藏所有层的代码，更改为自定义事件，在自定义事件中处理
            if(this.isSetPosition){
                this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
            }
            this.options.useOverlay?this._loadOverlay():null;               //如果使用遮罩则加载遮罩元素
            (this.isOverlay && this.options.useOverlay)?this.overlay.show():null;
            if(this.isDoPopup && (this.popupLayer.css("display")== "none")){
                this.options.useFx?this.doEffects("open"):this.popupLayer.show();
            }                            
        }.binding(this));
        this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;
        this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null;   //如果有关闭按钮，则给关闭按钮绑定关闭事件
        this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;
    },
    _construct:function(){                  //构造弹出层
        this.popupBlk.show();
        this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
        this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;
        this.recalculatePopupIframe();
        this.popupLayer.hide();
    },
    _loadOverlay:function(){                //加载遮罩
        pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();
        this.overlay?this.overlay.remove():null;
        this.overlay = $(document.createElement_x("div"));
        this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")
    },
    doresize:function(){
        this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;
        if(this.isSetPosition){
            this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);
        }
    },
    setPosition:function(left,top){          //通过传入的参数值改变弹出层的位置
        this.popupLayer.css({left:left,top:top});
    },
    doEffects:function(way){                //做特效
        way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");

    },
    recalculatePopupIframe:function(){     //重绘popupIframe,这个不知怎么改进，只好先用这个笨办法。
        this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});
    },
    close:function(){                      //关闭方法
        this.options.useOverlay?this.overlay.hide():null;
        this.options.useFx?this.doEffects("close"):this.popupLayer.hide();
    }
});

core.css代码如下：
body, ul, li, div, h1, h2{padding:0;margin:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clr{clear:both;overflow:hidden;height:0;}
a.closeBtn{position:absolute;top:10px;right:10px;display:block;width:60px;padding:4px 0;text-align:center;background:#fff;border:1px solid #85B6E2;color:#333;}
a.closeBtn:hover{color:#fff;border:1px solid #85B6E2;background:#85B6E2;}

body{padding:10px 20px 200px;}
h1{color:#85B6E2;text-align:center;padding-top:20px;}
.example{border:1px dashed #ccc;padding:40px;margin-top:10px;zoom:1;}
.example .description{color:#85B6E2;float:left;padding:10px 20px 0 80px;font-size:20px;}
.example .tigger{display:block;width:80px;padding:10px;text-align:center;background:#fff;border:1px solid #999;color:#333;cursor:pointer;float:left;}
.example select{margin-top:10px;}
.blk{width:500px;position:relative;}

.blk .head{padding-left:4px;}
.blk .head-right{background-position:right top;}
.blk .foot{padding-left:4px;background-position:left bottom;_height:3px;}
.blk .foot-right{background-position:right bottom;}

.blk .main{border-left:2px solid #85B6E2;border-right:2px solid #85B6E2;border-top:2px solid #85B6E2;border-bottom:2px solid #85B6E2;position:relative;background:#fff;}
.blk .main h2{font:bold 16px "Microsoft YaHei";padding:10px 20px 2px;color:#85B6E2;}
.blk .main ul{padding:20px;zoom:1;overflow:hidden;font-size:12px;}
.blk .main ul li{float:left;width:100px;text-align:center;line-height:30px;margin-bottom:10px;}
.blk .main ul li a{color:#333;display:block;}
.blk .main ul li a:hover{background:#85B6E2;color:#fff;font-weight:bold;font-size:14px;}


.t5 .blk{width:700px;}
.t5 .blk h2{color:#aaa;}
.t5 .blk .main ul li a{color:#aaa;}


* html .popup_iframe{
    width:expression_r(this.previousSibling.style.width);
    height:expression_r(this.previousSibling.style.height);
}
jquery 弹出层
04-09
jquery 弹出层jquery 弹出层jquery 弹出层jquery 弹出层jquery 弹出层
jQuery实现弹出层效果
12-13
本文实例为大家分享了jQuery实现弹出层的具体代码，供大家参考，具体内容如下 ###jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹出层效果</title> <style> .black_overlay {
jQuery-弹出层
AsaZyf的博客
07-05 504
html：&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jquery弹出层&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery/jquery-1.12.4.min.js" &gt;&amp
Jquery实现弹出层效果
weixin_34381687的博客
08-30 127
<script type="text/javascript"> $(document).ready(function(){ $('.one').click(function(){ //点击a标签 $('.box').show(); 弹出层显示 }); $('span').click(function(){ //点击关...
jquery弹出层
weixin_30577801的博客
09-05 105
这是一个弹出层的插件，有时候做东西的，经常会用到了，所以在次发一下，和大家分享一下！ [task]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/...
jQuery弹出层插件三种简单遮罩弹出框效果.rar
02-27
《jQuery弹出层插件：实现简单遮罩弹出框效果》 在Web开发中，弹出层（Modal）是一种常见的交互元素，用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库，提供了丰富的插件来...
jquery弹出层插件
12-29
《jQuery弹出层插件深度解析》 在Web开发领域，jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示，弹出层（Modal）是不可或缺的一部分，它能够吸引用户的注意力并提供额外的信息或操作...
jQuery弹出层窗口插件popupWindow.js
12-10
jQuery弹出层窗口插件popupWindow.js是一款基于jQuery的轻量级组件，它极大地简化了在Web应用中创建模态对话框或浮动窗口的过程。这个插件提供了丰富的功能，包括最大化、最小化、窗口拖拽以及自定义尺寸调整，使得...
jQuery弹出层插件三种简单遮罩弹出框效果
10-29
本文将深入探讨标题所提及的"jQuery弹出层插件三种简单遮罩弹出框效果"，以及如何利用jQuery实现这些效果。 首先，让我们了解什么是弹出层和遮罩弹出框。弹出层（Popup Layer）是一种常见的网页交互设计，当用户...
javascript弹出层组件easyDialog v2.0
jimmy2248的专栏
01-14 780
easyDialog在经过一段时间的使用后，对使用中碰到的一些问题进行了总结，最近花了点时间对原来的代码进行了重构和优化，并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能，从项目的角度来说就是如何能快速的完成项目，而这个版本不仅仅是实现基本的功能，更多的考虑了弹出层如何更好更轻松的应用于项目中。 easyDialog v2.0新增的功能： 1. 增加了默认的弹出层内容模板，
jQuery之弹出层
The_upside_of_down的博客
09-18 1029
大家都知道弹出框，弹出提示、警告用alert、window都可以实现。但是如果让你点击一个事件后，弹出一个小小的界面，而不是一个提示框。我们应该如何实现？在我学习了jquery之后，发现jquery可以实现。但具体过程我还有点模糊，因此学习了别人的代码以及思路。 效果图如下： 通过效果图我们可以看到，第一个界面只有一个简单的点击弹出层的提示按钮，点击后弹出层弹出，...
Jquery效果之弹出层
weixin_34304013的博客
09-17 134
像这种弹出透明背景层效果很常见了，除部分区域可以操作外其他区域不能操作，目前有提供插件，完全可以实现此种效果。 演示效果 完整实例包下载 主要需要其中两个JS，分别为jquery.js和tipswindown.js两个文件。 下面为调用JS方法的主要代码，命名为index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S...
jquery 简单弹出层(转)
weixin_34343308的博客
06-23 103
预定义html代码：没有 所有代码通过js生成和移除。 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; ...
jQuery实现 弹出层效果
热门推荐
qq_095的博客
09-07 1万+
jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta
jquery实现 弹出层效果
jack_rose_me的博客
04-15 2032
jQuery实现 弹出层效果 点击弹出层：弹出弹出层 点击阴影：关闭弹出层 点击“关闭”关闭弹出层 整体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹...
掌握jQuery弹出层效果技巧
jQuery 弹出层是一种基于 jQuery 库实现的网页元素，它能够使得某些元素在页面上通过动态的显示或隐藏来达到突出重点内容、显示隐藏信息或作为用户交互界面的作用。在实际开发中，弹出层常常被用来实现模态窗口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值