jquery弹框效果(背景变暗)代码示例__GB_window_height_GB_overlay_GB_HEIGHT_GB_WIDTH_

当前位置: 编程技术>jquery

jquery弹框效果(背景变暗)代码示例

来源: 互联网发布时间：2014-09-03

本文导语: 本节内容： jquery弹框效果本例中的JQUERY弹框效果，背景变暗，可以自行添加弹框的动画效果。 1,效果图如下： 2，js代码代码示例: var GB_DONE = false; var GB_HEIGHT = 400; var GB_WIDTH = 400; function GB_show(caption, url, height, width) { $(...

本节内容：
jquery弹框效果

本例中的JQUERY弹框效果，背景变暗，可以自行添加弹框的动画效果。

1,效果图如下：

2，js代码

代码示例:

var GB_DONE = false;
var GB_HEIGHT = 400;
var GB_WIDTH = 400;

function GB_show(caption, url, height, width) {
$("GB_window").remove();
GB_HEIGHT = height || 400;
GB_WIDTH = width || 400;
if(!GB_DONE) { // www.
$(document.body)
.append("

"
+ "

");
    $("#GB_window img").click(GB_hide);
    $("#GB_overlay").click(GB_hide);
    $(window).resize(GB_position);
    GB_DONE = true;
}

$("#GB_frame").remove();
//下面的append方法里的内容为弹出框的内容，可以自行设定
$("#GB_window").append("

名称：

常量名：

URL：

target：_self_blank_parent_top

描述：

");
$("#GB_caption").html(caption);
$("#GB_overlay").show();
$("#cancer").click(GB_hide);
GB_position();
$("#GB_window").slideDown("slow");
}

function GB_hide() {
$("#GB_window").slideUp("slow");
$("#GB_overlay").hide();
}

function GB_position() {
var de = document.documentElement;
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
$("#GB_window").css({width:GB_WIDTH+"px",height:GB_HEIGHT+"px",
left: ((w - GB_WIDTH)/2)+"px" });
$("#GB_frame").css("height",GB_HEIGHT - 32 +"px");
}
alert("sdf");
}

3，greybox.js

代码示例:

var GB_DONE = false;
var GB_HEIGHT = 400;
var GB_WIDTH = 400;

function GB_show(caption, url, height, width) {
$("GB_window").remove();
GB_HEIGHT = height || 400;
GB_WIDTH = width || 400;
if(!GB_DONE) {
$(document.body)
.append("

"
+ "

");
    $("#GB_window img").click(GB_hide);
    $("#GB_overlay").click(GB_hide);
    $(window).resize(GB_position);
    GB_DONE = true;
}

$("#GB_frame").remove();
$("#GB_window").append("

名称：

常量名：

URL：

target：_self_blank_parent_top

描述：

");
$("#GB_caption").html(caption);
$("#GB_overlay").show();
$("#cancer").click(GB_hide);
GB_position(); // www.
$("#GB_window").slideDown("slow");
}

function GB_hide() {
$("#GB_window").slideUp("slow");
$("#GB_overlay").hide();
}

function enter(){
alert("sdf");
}

4，greybox.css

代码示例:

#GB_overlay {
background-image: url(/images/overlay.png);
position: absolute;
margin: auto;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
}

* html #GB_overlay {
background-color: #000;
background-color: transparent;
background-image: url(/images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
}

#GB_window {
top: 100px;
left: 0px;
position: absolute;
background: #fff;
border: 5px solid #aaa;
overflow: auto;
width: 400px;
height: 400px;
z-index: 150;
}

#GB_frame {
border: 0;
overflow: auto;
width: 100%;
height: 378px;
font-size:13px;
}

#GB_caption {
font: 12px bold helvetica, verdana, sans-serif;
color: #fff;
background: #888;
padding: 2px 0 2px 5px;
margin: 0;
text-align: left;
}

#GB_window img {
position: absolute;
top: 2px;
right: 5px;
cursor: pointer;
cursor: hand;
}