jquery弹出div对话框实例代码

使用说明：

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.screenLockerOpacity,
 display: "none"
 });
 showScreenLocker();
 
 $("#popupLayerScreenLocker").click(function() {
 $.closePopupLayer();
 });
 }
 }
 
 function hideScreenLocker(popupName) {
 if (openedPopups.length == 0) {
 screenlocker = false;
 $('#popupLayerScreenLocker').fadeOut();
 } else {
 $('#popupLayerScreenLocker').css("z-index",parseInt($("#popupLayer_" + openedPopups[openedPopups.length - 1].name).css("z-index")) - 1);
 }
 
 if ($.browser.msie && $.browser.version < 7) {
 $("select.hidden-by-" + popupName).removeClass("hidden-by-jmp hidden-by-" + popupName).css("visibility","visible");
 }
 }
 
 function setPopupLayersPosition(popupElement, animate) {
 if (popupElement) {
 if (popupElement.width() < $(window).width()) {
 var leftPosition = (document.documentElement.offsetWidth - popupElement.width()) / 2;
 } else {
 var leftPosition = document.documentElement.scrollLeft + 5;
 }
 
 if (popupElement.height() < $(window).height()) {
 var topPosition = document.documentElement.scrollTop + ($(window).height() - popupElement.height()) / 2;
 } else {
 var topPosition = document.documentElement.scrollTop + 5;
 }
 
 var positions = {
 left: leftPosition + "px",
 top: topPosition + "px"
 };
 
 if (!animate) {
 popupElement.css(positions);
 } else {
 popupElement.animate(positions, "slow");
 }
 
 setScreenLockerSize();
 } else {
 for (var i = 0; i < openedPopups.length; i++) {
 setPopupLayersPosition($("#popupLayer_" + openedPopups[i].name), true);
 }
 }
 }
 
 function showPopupLayerContent(popupObject, newElement, data) {
 var idElement = "popupLayer_" + popupObject.name;
 
 if (newElement) {
 showScreenLocker();
 
 $("body").append("<div id='" + idElement + "'><!-- --></div>");
 
 var zIndex = parseInt(openedPopups.length == 1 ? 1000 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 2;
 }  else {
 var zIndex = $("#" + idElement).css("z-index");
 }
 
 var popupElement = $("#" + idElement);
 
 popupElement.css({
 visibility: "hidden",
 width: popupObject.width == "auto" ? "" : popupObject.width + "px",
 height: popupObject.height == "auto" ? "" : popupObject.height + "px",
 position: "absolute",
 "z-index": zIndex
 });
 
 var linkAtTop = "<a href='#' class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;'>&nbsp;</a><input class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;' />";
 var linkAtBottom = "<a href='#' class='jmp-link-at-bottom' style='position:absolute; left:-9999px; bottom:-1px;'>&nbsp;</a><input class='jmp-link-at-bottom' style='position:absolute; left:-9999px; top:-1px;' />";
 
 popupElement.html(linkAtTop + data + linkAtBottom);
 
 setPopupLayersPosition(popupElement);
 
 popupElement.css("display","none");
 popupElement.css("visibility","visible");
 
 if (newElement) {
 popupElement.fadeIn();
 } else {
 popupElement.show();
 }
 
 $("#" + idElement + " .jmp-link-at-top, " +
 "#" + idElement + " .jmp-link-at-bottom").focus(function(){
 $(focusableElement[focusableElement.length-1]).focus();
 });
 
 var jFocusableElements = $("#" + idElement + " a:visible:not(.jmp-link-at-top, .jmp-link-at-bottom), " +
 "#" + idElement + " *:input:visible:not(.jmp-link-at-top, .jmp-link-at-bottom)");
 
 if (jFocusableElements.length == 0) {
 var linkInsidePopup = "<a href='#' class='jmp-link-inside-popup' style='position:absolute; left:-9999px;'>&nbsp;</a>";
 popupElement.find(".jmp-link-at-top").after(linkInsidePopup);
 focusableElement.push($(popupElement).find(".jmp-link-inside-popup")[0]);
 } else {
 jFocusableElements.each(function(){
 if (!$(this).hasClass("jmp-link-at-top") && !$(this).hasClass("jmp-link-at-bottom")) {
 focusableElement.push(this);
 return false;
 }
 });
 }
 $(focusableElement[focusableElement.length-1]).focus();
 popupObject.success();
 
 if (popupObject.reloadSuccess) {
 popupObject.reloadSuccess();
 popupObject.reloadSuccess = null;
 }
 }
 
 function loadPopupLayerContent(popupObject, newElement) {
 if (newElement) {
 openedPopups.push(popupObject);
 }
 if (popupObject.target != "") {
 showPopupLayerContent(popupObject, newElement, $("#" + popupObject.target).html());
 } else {
 $.ajax({
 url: popupObject.url,
 data: popupObject.parameters,
 cache: popupObject.cache,
 dataType: "html",
 method: "GET",
 success: function(data) {
 showPopupLayerContent(popupObject, newElement, data);
 },
 error: popupObject.error
 });
 }
 }
 
 $(window).resize(function(){
 setScreenLockerSize();
 setPopupLayersPosition();
 });
 
 $(document).keydown(function(e){
 if (e.keyCode == 27) {
 $.closePopupLayer();
 }
 });
})(jQuery);

利用BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。

先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩

 代码如下 复制代码

<SCRIPT type=text/javascript src="http://www.google-analytics.com/ga.js" async="true"></SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="images/jquery.blockUI.js"></SCRIPT>

导入库文件后，就可以调用BlockUI了，BlockUI的调用挺简单的，看下面这段代码

 

 代码如下 复制代码
$(function(){
$('#box_btn').click(function(){ //给box_btn绑定一个鼠标点击的事件
 $.blockUI({ //当点击事件发生时调用弹出层
 message: $('#box'), //要弹出的元素box
 css: { //弹出元素的CSS属性
 top: '50%',
   left: '50%',
   textAlign: 'left',
   marginLeft: '-320px',
   marginTop: '-145px',
 width: '600px',
 background: 'none'
 }
 }); <A href="http://www.111cn.net/">casino spiele online</A>
 $('.blockOverlay').attr('title','单击关闭').click($.unblockUI); //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
 $('.close').click($.unblockUI); //也可以自定义一个关闭按钮来关闭弹出层
});
});

看了上面的代码，其实你会发觉BlockUI的使用很简单，有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。

$.blockUI定义了一个message属性的，该属性的值就定义了要弹出的元素，比如要弹出一个id为box的div元素，就可以这样写：message: $('#box')，对应了上面的第4行代码。需要注意的是，要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为display:none。

$.blockUI还定义了一个css属性，该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看，其实在库文件中也默认定义了一个弹出层的样式，如果你在页面中定义的样式效果并不是很理想，最好是看看库文件中的$.blockUI.defaults的CSS属性。

时间： 2024-04-27 02:01:46

jquery弹出div对话框实例代码的相关文章

jquery 弹出层效果实例代码(1/2)

js代码   /*弹出自定义隐藏框 <div id="league" style="display:none"> <button class="close" >close</button> </div> q.showpanel("league", function(panel, container) { container.find(".close").cli

jQuery实现时尚漂亮的弹出式对话框实例_jquery

本文实例讲述了jQuery实现时尚漂亮的弹出式对话框.分享给大家供大家参考.具体如下: 这是一款十分简洁漂亮的HTML5弹出对话框效果,基于jQuery来实现,引入了jquery1.6.2库. 本效果描述:用鼠标点击一下右上角的小图标,会弹出一个层对话框,里面可以提交留言.评论之类的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="

JQuery弹出炫丽对话框的同时让背景变灰色_jquery

这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色.特地和大家分享分享. 先看效果图:  代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src=&q

jQuery弹出div层过2秒自动消失_jquery

下面给大家分享一段代码关于jquery弹出div层并自动消失的实现代码,废话不多说了,具体代码如下所示:  var HuiFang={ m_tishi :null,//全局变量 判断是否存在div, //提示div 等待2秒自动关闭 Funtishi: function (content, url) { if (HuiFang.m_tishi == null) { HuiFang.m_tishi = '<div class="xiaoxikuang none" id="

jQuery弹出遮罩层实例程序代码

特点:代码量少,简单易用.没有格式限制,随意的代码填充.舍弃了在ie6/7/8下的完全兼容(背景不透明),仅保证信息内容可正常阅读. 缺点:考虑到在触屏手机上的效果,未添加对scroll事件的响应,否则有可能永远看不到弹出的内容(网页的缩放会影响scrollTop值). 相关插件要么功能太强大体积也大,要么是固定的格式需要预设标题.内容.关闭按钮等.非固定样式又非常灵活的一时没找到,就把手头的一个有bug的原生javascript弹出层改动了一下,借助jQuery绕开了麻烦的兼容性问题,正好如今

jQuery 弹出层对话框插件实例

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html><head lang=zh><title>jquery dialog弹出层对话框插件演示</title> <meta http-equiv=co

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)_jquery

弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示        源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可

jQuery鼠标悬浮链接弹出跟随图片实例代码_javascript技巧

本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body{ margin:0;

jQuery弹出层插件简化版代码下载_jquery

复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){  return this.replace(new RegExp(s1,"gm"),s2);  }; (function($){  /*  * $-layer 0.1 - New Wave Javascript  *  * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = "&