jQuery jqModal弹出层
斜成济
jqModal网站：http://dev.iceburg.net/jquery/jqModal/
整理的几个例子：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>http://dev.iceburg.net/jquery/jqModal/</title>
<link href="jqModal.css" mce_href="jqModal.css" rel="stylesheet" type="text/css" />
<mce:script src="jquery.js" mce_src="jquery.js" type="text/javascript"></mce:script>
<mce:script src="jqModal.js" mce_src="jqModal.js" type="text/javascript"></mce:script>
<mce:script src="jqDnR.js" mce_src="jqDnR.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript" language="javascript"><!--
$().ready(function() {
$('#divCreate').jqm({trigger: '#create'});
// $('#divCreate').jqm({modal: true, trigger: '#create'}); //加上modal:true,可以使背
景不可点击
/*-------------------------------------*/
$('#divDialog').jqm();
/*-------------------------------------*/
$('#ex2').jqm({ajax: 'Test.aspx', trigger: 'a.ex2trigger'});
/*-------------------------------------*/
$('#ex3a').jqm({
modal:true,
trigger: '#ex3aTrigger',
overlay: 50, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay'})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(
function(){ $(this).addClass('jqmdXFocus'); },
function(){ $(this).removeClass('jqmdXFocus'); })
.focus(
function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(
function(){ $(this).removeClass('jqmdXFocus'); });
});
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<a href="javascript:void(0);" mce_href="javascript:void(0);" id="create"><img title="新建" alt="新建"
src="images/ico/folder_new.gif" /> 新建文件夹</a>
<div id="divCreate" class="jqmWindow" style="display:none;" mce_style="display:none;">
<h3>新建文件夹</h3>
名称：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="btnCreateFolder" runat="server" Text="确定" />
<asp:Button ID="btnPanel2Cancel" runat="server" Text="取消" />
<br />
<a href="#" mce_href="#" class="jqmClose">关闭</a>
</div>
<br />
------------------------------------------------------------------------------------
<br />
默认：
<br />
<a href="#" mce_href="#" class="jqModal">view</a>
<div class="jqmWindow" id="divDialog">
<a href="#" mce_href="#" class="jqmClose">Close</a>
<hr>
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <i>before</i> using it.
</div>
<br />
------------------------------------------------------------------------------------
<br />
AJAX：
<br />
<a href="#" mce_href="#" class="ex2trigger">Ajax</a>
<div class="jqmWindow" id="ex2">
Please wait... <img src="images/busy.gif" mce_src="images/busy.gif" alt="loading" />
</div>
<br />
------------------------------------------------------------------------------------
<br />
Dialog：
<br />
<a href="#" mce_href="#" id="ex3aTrigger">view</a> (dialog)
<div id="ex3a" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog
Title</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">
<div class="jqmdMSG">
Styled windows or dialogs are easy!
<br /><br />
This particular theme was done for poMMo --
feel free to borrow the styling, or use it as a reference when creating your own.
CSS and Markup is available under the HTML + CSS tabs of example 3a.
<br />
<input type="button" value="确定" />
</div>
</div></div></div>
<input type="image" src="images/close.gif" mce_src="images/close.gif" class="jqmdX jqmClose" />
</div>
</form>
</body>
</html>
类似资料：