当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jquery弹出div对话框实例代码

jquery弹出div对话框实例代码

作者：创新互联文章来源：前端开发部点击数：更新时间：2008-10-11
在jquery中最简单的弹出层就是我们可直接使用css与hide,show来实现，那只是超简单的，如果要复杂一点我们可照此方法来操作。
使用说明：
myHiddenDiv表示要弹出来的整体div
popup-body中的内容替换为你需要的内容
openStaticPopup();表示弹出div，锁定界面
$.closePopupLayer(‘myStaticPopup’);表示关闭div，解锁界面
<h2></h2>弹出div的标题
openStaticPopup中的width表示弹出div的宽度
其实就是细节上的调整
实例
代码如下复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
<script type="text/javascript">
//<![CDATA[
$.setupJMPopups({
screenLockerBackground: "#003366",
screenLockerOpacity: "0.7"
});

function openStaticPopup() {
$.openPopupLayer({
name: "myStaticPopup",
width: 400,
target: "myHiddenDiv"
});
}
//]]>
</script>
<style type="text/css" media="screen">
#myHiddenDiv {display:none;}
.popup {background:#FFF; border:1px solid #333; padding:1px;}
.popup-header {height:24px; padding:7px; background:url("bgr_popup_header.jpg") repeat-x;}
.popup-header h2 {margin:0; padding:0; font-size:18px; float:left;}
.popup-header .close-link {float:right; font-size:11px;}
.popup-body {padding:10px;}
</style>
</head>
<body>
<a href="javascript:void();" onclick="openStaticPopup();" title="Static example">添加Flash信息</a>
<div id="myHiddenDiv">
<div>
<div>
<h2>添加Flash信息</h2>
<a href="javascript:void();" onclick="$.closePopupLayer('myStaticPopup');" title="Close">Close</a>
<br clear="all" />
</div>
<div>
<table>
<tr><td>选择图片</td><td>13123124124312413413</td></tr>
<tr><td>选择图片</td><td>13123124124312413413</td></tr>
<tr><td>选择图片</td><td>13123124124312413413</td></tr>
<tr><td></td><td>提交</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>

jmpopups代码：
代码如下复制代码
(function($) {
var openedPopups = [];
var popupLayerScreenLocker = false;
var focusableElement = [];
var setupJqueryMPopups = {
screenLockerBackground: "#000",
screenLockerOpacity: "0.5"
};

$.setupJMPopups = function(settings) {
setupJqueryMPopups = jQuery.extend(setupJqueryMPopups, settings);
return this;
}

$.openPopupLayer = function(settings) {
if (typeof(settings.name) != "undefined" && !checkIfItExists(settings.name)) {
settings = jQuery.extend({
width: "auto",
height: "auto",
parameters: {},
target: "",
success: function() {},
error: function() {},
beforeClose: function() {},
afterClose: function() {},
reloadSuccess: null,
cache: false
}, settings);
loadPopupLayerContent(settings, true);
return this;
}
}

$.closePopupLayer = function(name) {
if (name) {
for (var i = 0; i < openedPopups.length; i++) {
if (openedPopups[i].name == name) {
var thisPopup = openedPopups[i];

openedPopups.splice(i,1)

thisPopup.beforeClose();

$("#popupLayer_" + name).fadeOut(function(){
$("#popupLayer_" + name).remove();

focusableElement.pop();

if (focusableElement.length > 0) {
$(focusableElement[focusableElement.length-1]).focus();
}

thisPopup.afterClose();
hideScreenLocker(name);
});

break;
}
}
} else {
if (openedPopups.length > 0) {
$.closePopupLayer(openedPopups[openedPopups.length-1].name);
}
}

return this;
}

$.reloadPopupLayer = function(name, callback) {
if (name) {
for (var i = 0; i < openedPopups.length; i++) {
if (openedPopups[i].name == name) {
if (callback) {
openedPopups[i].reloadSuccess = callback;
}

loadPopupLayerContent(openedPopups[i], false);
break;
}
}
} else {
if (openedPopups.length > 0) {
$.reloadPopupLayer(openedPopups[openedPopups.length-1].name);
}
}

return this;
}

function setScreenLockerSize() {
if (popupLayerScreenLocker) {
$('#popupLayerScreenLocker').height($(document).height() + "px");
$('#popupLayerScreenLocker').width($(document.body).outerWidth(true) + "px");
}
}

function checkIfItExists(name) {
if (name) {
for (var i = 0; i < openedPopups.length; i++) {
if (openedPopups[i].name == name) {
return true;
}
}
}
return false;
}

function showScreenLocker() {
if ($("#popupLayerScreenLocker").length) {
if (openedPopups.length == 1) {
popupLayerScreenLocker = true;
setScreenLockerSize();
$('#popupLayerScreenLocker').fadeIn();
}

if ($.browser.msie && $.browser.version < 7) {
$("select:not(.hidden-by-jmp)").addClass("hidden-by-jmp hidden-by-" + openedPopups[openedPopups.length-1].name).css("visibility","hidden");
}

$('#popupLayerScreenLocker').css("z-index",parseInt(openedPopups.length == 1 ? 999 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 1);
} else {
$("body").append("<div id='popupLayerScreenLocker'></div>");
$("#popupLayerScreenLocker").css({
position: "absolute",
background: setupJqueryMPopups.screenLockerBackground,
left: "0",
top: "0",
opacity: setupJqueryMPopups
Jquery实现文章字体大小切换效果代码 :上一篇
jQuery 滑动门自动滑动实现代码 :下一篇

前端开发

域名注册

虚拟主机

网站建设

服务器租用

营销推广

网站程序

移动互联网

企业邮箱

网站备案

jquery弹出div对话框实例代码

jquery弹出div对话框实例代码

jQuery相关文章