`
chenhua_1984
  • 浏览: 1251085 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery jmpopups 弹出新窗口,可以弹多个

阅读更多
<!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=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: 600,
						target: "myHiddenDiv"
					});
				}

				function openAjaxPopup() {
					$.openPopupLayer({
						name: "mySecondPopup",
						width: 300,
						url: "ajax_example.html"
					});
				}
			//]]>
		</script>
		<style type="text/css" media="screen">
			body {margin:0; font-family:"Trebuchet MS"; line-height:120%; color:#333;}
			h1 {margin-bottom:50px; font-size:40px; font-weight:normal;}
			p {margin:0; padding:0 0 30px; font-size:12px;}
			pre {font-size:12px; font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","Courier"; line-height:120%; background:#F4F4F4; padding:10px;}
			#general {margin:30px;}
			
			#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;height:500px}
			
			form {margin:0; padding:0;}
			form * {font-size:12px;}
			input {margin-bottom:12px;}
			label {display:block;}  
		</style>
		<title>jmpopups - example page</title>
	</head>
	<body>
		<div id="general">
			<p><a href="javascript:;" onclick="openStaticPopup()" title="Static example">Open a popup using a html content from a hidden element.</a></p>
			</div>
		<div id="myHiddenDiv">
			<div class="popup">
				<div class="popup-header">
					<h2>Now an ajax example</h2>
					<a href="javascript:;" onclick="$.closePopupLayer('myStaticPopup')" title="Close" class="close-link">Close</a>
					<br clear="all" />
				</div>
				<div class="popup-body">
					
	
					<p><a href="javascript:;" onclick="openAjaxPopup()" title="Ajax example">Open a popup using ajax</a></p>
				</div>
			</div>
		</div>		
	</body>
</html>
 
  • 大小: 4.5 KB
  • 大小: 10 KB
分享到:
评论
3 楼 calatustela 2011-04-07  
楼主,有没有碰到过绑定弹出窗口中按钮事件无效的问题。例如:
$('#btnNewSmsOrder').click(function(){
.....
});
主页面却是好的
2 楼 tiantianshagn 2011-02-16  
回复楼上的 $("#popupLayerScreenLocker").click(function() {
               // $.closePopupLayer();
            });

注释掉就可以了。 我copy别人的 。
1 楼 qingtianxl 2010-06-30  
有个问题想请教,当弹出窗口后点击空白处时,弹出的窗口就消失了,又返回到了之前的页面,请问怎么样设置才能在点击空白处时,弹出窗口不消失

相关推荐

    弹出层jquery.jmpopups

    标题中的“弹出层jquery.jmpopups”指的是一个基于jQuery的弹出窗口插件,主要用于在网页上创建各种类型的弹出层,如提示框、对话框或模态窗口。这个插件通常可以帮助开发者轻松地实现动态显示和隐藏的内容区域,以...

    jquery 点击弹出登陆窗口

    为了使弹出窗口有良好的用户体验,我们可以添加一些CSS样式来调整登录窗口的位置和外观。 ```css #login-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-...

    用jQuery实现弹出窗口弹出div层

    在页面加载后或者点击页面的某个链接时弹出一个div层,同时页面的其他地方会变灰

    jquery点击弹出登陆窗口.rar

    jQuery库通过引入一个js文件(通常命名为`jquery.js`或`jquery.min.js`)来启用,然后我们可以使用`$`符号作为jQuery的别名,进行DOM元素的选择、操作和事件绑定。例如,要选中页面上的一个元素,可以使用`$("#...

    jQuery弹出信息窗口

    在"jQuery原创 弹出窗口"的实现中,开发者可能使用了自定义的jQuery插件来封装这个功能。这类插件通常包含以下部分: 1. **选择器与元素创建**:通过jQuery选择器找到特定元素,例如按钮或链接,当这些元素被点击时...

    jquery点击弹出登陆窗口

    在Web开发中,弹出窗口通常有两种实现方式:模态对话框(modal dialog)和浮动层(overlay)。jQuery UI库提供了方便的`dialog`功能来创建模态对话框,但本案例可能仅依赖于jQuery基础功能,因此更可能使用浮动层的...

    jquery的一个弹出窗口

    本文将深入探讨如何使用jQuery实现一个弹出窗口,并基于提供的标题和描述来构建相关知识点。 首先,我们要了解jQuery弹出窗口的基本概念。这种弹出窗口通常被称为模态对话框或模态窗口,它会在用户与网页其他部分...

    jquery实现弹出窗口

    "jquery实现弹出窗口"是一个常见的需求,尤其在用户交互和信息提示时。这里我们将深入探讨如何使用 jQuery 来创建具有良好兼容性的弹出窗口,并结合实例 "ModalDIV_jquery" 进行讲解。 首先,jQuery 弹出窗口通常被...

    jquery 弹出模式窗口

    接下来,你可以创建一个简单的弹出窗口: ```javascript $.prompt('这是一个基本的弹出模式窗口示例', { closeOnCancel: true, closeOnEscape: true, backgroundOpacity: 0.5, show: 'fadeIn', hide: 'fadeOut...

    支持弹出多个窗口的jQuery弹窗插件

    本文将详细解析"支持弹出多个窗口的jQuery弹窗插件",即popupWindow.js,它是jQuery插件家族中的一个重要成员,主要用于创建具有多种功能的弹出窗口。 首先,popupWindow.js的核心特性是它支持弹出多个窗口,这意味...

    jquery 弹出 div 模式窗口

    在这个场景中,我们关注的是如何使用jQuery结合magnific-popup插件来实现一个弹出Div模式窗口的功能。 `jquery.magnific-popup.js`是magnific popup插件的核心脚本,它提供了一种优雅的方式来创建各种类型的弹出...

    jquery自定义弹出窗口

    jQuery自定义弹出窗口的核心是通过CSS和JavaScript来创建一个新的层(div元素)模拟窗口效果。首先,我们需要在HTML文件中创建一个隐藏的弹出窗口模板: ```html ;"&gt; &lt;!-- 弹出窗口内容 --&gt; ``` ### 2. 弹出...

    jquery实现弹出登录窗口

    "jquery实现弹出登录窗口"这个主题,主要涉及如何利用jQuery创建一个交互式的弹出登录窗口,增强用户体验。下面将详细介绍实现这一功能的关键步骤和相关知识点。 首先,我们需要理解jQuery的基本用法。jQuery通过...

    jQuery 实现弹出消息窗口,相当的绚丽

    本文将详细探讨如何利用jQuery实现一个绚丽的弹出消息窗口。 首先,理解jQuery的基本语法是实现这一功能的基础。jQuery的核心概念是选择器(Selector),它用于定位HTML文档中的元素。例如,“$(‘#id’)”会选择ID...

    17、Jquery支持自定义弹出窗口插件

    通过以上步骤,我们可以创建一个功能齐全、易于扩展的jQuery自定义弹出窗口插件。这不仅提高了代码的复用性,也使得开发者能够根据项目需求轻松定制弹出窗口的行为和样式。在实际开发中,结合CSS和可能存在的其他...

    JQUERY 弹出窗口

    在"JQUERY 弹出窗口"这个主题中,我们主要探讨的是如何利用jQuery实现弹出对话框或者弹出层的功能,这些功能通常用于显示提示信息、用户确认、表单填写等多种场景。 首先,jQuery 提供的 `.show()`, `.hide()`, 和 ...

    jquery_dialog 弹出窗口

    在本实例中,我们关注的是`jquery_dialog`,这是一个jQuery插件,专门用于实现弹出窗口效果。这个插件使得在网页中创建各种形式的对话框变得简单而高效,比如警告消息、确认框或者自定义内容的弹窗。 首先,我们来...

    jquery.弹出框jquery.弹出框

    弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...

Global site tag (gtag.js) - Google Analytics