http://www.carrefourstation.com

【新蒲京娱乐场】弹出浮动层

js弹出层源码:

  //关闭弹窗
  $('.close').click(function(){
    $('.overlay').hide();
    $('.mask').hide();
    $('body').css('overflow','auto');
  });
});
</script>

<!DOCTYPE html>
<html xmlns=";
<head>
<title>jQuery弹出层效果</title>
<meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" />
<meta content="jQuery弹出层效果,有关闭开关,代码轻易易懂,你能够随意改善弹出层的参数。" name="description" />
<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出蒙蔽层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
近日的话,笔者恐怕喜欢这么些团结改换的弹出层。自个儿在项目中也用的是这一个。
</div>
</body>
</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题页</title>

}

.container{width:1000px; height: 1200px; border: 1px solid #F00; position: relative; margin: 0 auto;}
.btn1{width:100px; height: 40px; font-size: 20px; position: absolute;; left: 450px; bottom: 10px;}
.overlay{width:100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; background: #000; opacity: 0.8; z-index: 1; display: none;}
.mask{width: 500px; height: 400px; background: #09F; position: absolute; left: 250px; z-index: 2; display: none;}
.close{width:50px; height: 50px; line-height: 50px; text-align: center; font-size: 30px; position: absolute;; top: 0; right: 0; color:#FFF; text-decoration:none;}

core.css

</head>

 


新蒲京娱乐场 1

效果:


<script type="text/javascript">

  //现身弹窗
  $('.btn1').click(function(){
    $('.overlay').show();
    $('.mask').show();

  • $(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>

$(function(){

 

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, .blk .head-right, .blk .foot, .blk .foot-right{background:url(images/pop_up_bg.png);overflow:hidden;height:4px;}
.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;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;}

</script>

弹出层现身现在:1、弹窗始终高居整个窗口的中游 2、滚动条不可滚动

// JavaScript Document
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)));
    }
}

 document.write('<a href="#" class="weixin"> 关切Wechat</a>@ daixiaorui.com');

js代码:

/**/
* html .popup_iframe{
    width:expression(this.previousSibling.style.width);
    height:expression(this.previousSibling.style.height);
}

 $(".weixindiag").css({

新蒲京娱乐场 2

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;
}

.weixinclose{backgroundnull:url() no-repeat; width:38px; height:38px; display:inline-block; margin-bottom:-50px; cursor:pointer; margin-bottom:-38px; z-index:999; position:absolute;right:-18px; top:-18px;}

<script>
$(function(){

    <script type="text/javascript" src="js/layer.js"></script>

复制代码

HTML代码:


.overlay{background-color:#252525;position:absolute;z-index:90000;left:0;top:0;width:100%;height:100%;opacity:0.7;filter: alpha(opacity=70);-moz-opacity: 0.5; display:none;}

<div class="container">
  <input type="button" value="点击" class="btn1">
  <div class="overlay"></div>
  <div class="mask">
    <a href="javascript:;" class="close">×</a>
  </div>
</div>


八个比较实用的javascript弹出层弹出Wechat扫描的测量试验效果,希望对各位朋友会怀有利于

    //禁掉滚动条
    $('body').css('overflow','hidden');


郑重声明:本文版权归澳门新莆京手机网站所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。