<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0"><channel><title> Rss - JQuery插件之模拟模态对话框 - jmodal</title><link>http://www.ajaxplaza.net/articles/a5.aspx</link> <description>此jquery插件是使用div层模拟模态对话框，使用css样式的opacity和z-index可以很好的控制模拟对话框的UI以及提高用户体验。无须弹出新窗体或者使用Alert或者activex object，更加方便快捷的显示提示信息，界面友好，使用方便！</description> <copyright>Copyright by AjaxPlaza 2008-2009</copyright><language>zh-cn</language><generator>http://www.ajaxplaza.net</generator><item><title>JQuery插件之模拟模态对话框 - jmodal</title><author>jericho</author><category>JQuery框架/插件</category><description><![CDATA[<p>大家好，本此介绍的jquery插件是使用div层模拟模态对话框，使用css样式的opacity和z-index可以很好的控制模拟对话框的UI以及提高用户体验。</p>
<p>此插件的运行效果如下：<br />
<img height="195" width="500" src="/userfiles/image/2009-4/ae578bfc-f65d-4017-af2b-9af608c11a78.png" alt="" /><br />
可以看到其显示效果为时下最流行的sns社区弹出框样式，当然开发人员也可以根据需要修改相应的样式。</p>
<p><strong>API</strong>：<br />
<strong>data</strong>(Object): 传递到对话框的数据。<br />
<strong>buttonText</strong>(String): 按钮显示的文本（如上图中的&ldquo;删除&rdquo;）。<br />
<strong>okEvent</strong>(Function): 点击按钮时处理的事件。<br />
<strong>initWidth</strong>(Interger): 对话框的初始宽度，默认为400。<br />
<strong>title</strong>(String): 对话框显示的标题。<br />
<strong>content</strong>(String): 对话框显示的内容（可包含html标签）。<br />
<strong>overlayCss</strong>(Object): 背景层样式（主要用于遮挡其他页面内容）。<br />
<strong>jmodalbgCss</strong>(Object): 对话框背景样式（如上图中的边框）。<br />
<strong>jmodalCss</strong>(Object): 对话框样式。<br />
<strong>closeCss</strong>(Object): 关闭按钮的样式。<br />
<strong>titleCss</strong>(Object): 对话框标题样式。<br />
<strong>contentCss</strong>(Object): 对话框内容样式。<br />
<strong>bottomCss</strong>(Object): 对话框底部样式。<br />
<strong>buttonCss</strong>(Object):按钮样式。</p>
<p><strong>使用方法</strong>：</p>
<div class="codeText">
<div class="codeHead"><span class="lantxt">JavaScript Code</span></div>
<div id="code_908">
<ol class="dp-c" start="1">
    <li class="alt"><span><span>$.fn.jmodal({&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;<span class="string">'Information'</span><span>,&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;<span class="string">'Hi,you&nbsp;displayed&nbsp;me?'</span><span>,&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;buttonText:&nbsp;<span class="string">'Yes,It\'s&nbsp;me'</span><span>,&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;okEvent:&nbsp;<span class="keyword">function</span><span>(e)&nbsp;{&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(<span class="string">'jmodal\'ll&nbsp;be&nbsp;closed&nbsp;after&nbsp;u&nbsp;click&nbsp;me:-)'</span><span>);&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
    <li><span>});&nbsp;&nbsp;</span></li>
</ol>
</div>
</div>
<p><strong>效果如下：</strong><br />
<img height="204" width="498" src="/userfiles/image/2009-4/017f3a72-e9c8-44a0-9017-0d4ea6d1c378.png" alt="" /></p>
<p>ps:为了使此插件使用时效率更高，可将API中的样式单独存放于.css文件中加以引用。</p>
<p><a href="http://www.namipan.com/d/jquery.jmodal.js/d2c11e02af82d24e77e90fb65bbcab58bfb254dcf2170000">下载此插件[JMODAL]</a></p><p><p><div style="border: 1px solid rgb(255, 204, 0); padding: 20px 10px 20px 60px; background: rgb(255, 255, 247) url(http://images.cnblogs.com/cnblogs_com/fromearth/164596/r_file_important.png) no-repeat scroll 7px center; font-family: Arial; font-size: 12px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 400px; height: 50px;">此文为Jericho原创,转载或引用请注明作者,可用于任何非商业目的的修改或传播,作者保留最终解释权利(<a href="http://www.ajaxplaza.net/">CopyLeft&copy;Jericho 2009</a>)</div></p>]]></description><pubDate>2009-04-08   10:12</pubDate><link>http://www.ajaxplaza.net/articles/a5.aspx</link></item></channel></rss>