“模态”DIV对话框

51CTO把我以前粘贴的代码弄掉了一些，让我自己拿回来用时居然不能用，现在重新粘贴上去。（2013-06-27）

下面的代码，可复制粘贴直接运行测试。

1、js代码：

<code>/*本脚本文件须结合jquery使用*/</code>

<code>                                                                                               </code> 

<code>function</code> <code>showModalDiv() {</code>

<code>    </code><code>var</code> <code>sWidth, sHeight;</code>

<code>    </code><code>sWidth = $(window).width();</code>

<code>    </code><code>sHeight = $(document).height();</code>

<code>    </code><code>//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）</code>

<code>    </code><code>var</code> <code>bgObj = document.createElement(</code><code>"div"</code><code>); </code><code>//创建一个div对象（背景层）</code>

<code>    </code><code>//定义div属性，即相当于</code>

<code>    </code><code>// &lt;div   id="bgDiv"   style="position:absolute;   top:0;   background-color:#777;   filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);   opacity:0.6;   left:0;   width:918px;   height:768px;   z-index:10000;"&gt; &lt;/div&gt;</code>

<code>    </code><code>bgObj.setAttribute(</code><code>"id"</code><code>, </code><code>"bgDiv"</code><code>);</code>

<code>    </code><code>bgObj.style.position = </code><code>"absolute"</code><code>;</code>

<code>    </code><code>bgObj.style.top = </code><code>"0"</code><code>;</code>

<code>    </code><code>bgObj.style.background = </code><code>"#777"</code><code>;</code>

<code>    </code><code>bgObj.style.filter = </code><code>"progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"</code><code>;</code>

<code>    </code><code>bgObj.style.opacity = </code><code>"0.6"</code><code>;</code>

<code>    </code><code>bgObj.style.left = </code><code>"0"</code><code>;</code>

<code>    </code><code>bgObj.style.width = sWidth + </code><code>"px"</code><code>;</code>

<code>    </code><code>bgObj.style.height = sHeight + </code><code>"px"</code><code>;</code>

<code>    </code><code>bgObj.style.zIndex = </code><code>"10000"</code><code>;</code>

<code>    </code><code>document.body.appendChild(bgObj); </code><code>//在body内添加该div对象</code>

<code>    </code><code>document.getElementById(</code><code>"divModal"</code><code>).style.display = </code><code>"block"</code><code>; </code><code>//显示"模态"DIV</code>

<code>    </code><code>$(</code><code>"#closeLogin"</code><code>).mouseover(</code><code>function</code><code>() {</code>

<code>        </code><code>this</code><code>.style.fontWeight = </code><code>"bold"</code><code>;</code>

<code>    </code><code>});</code>

<code>    </code><code>$(</code><code>"#closeLogin"</code><code>).mouseleave(</code><code>function</code><code>() {</code>

<code>        </code><code>this</code><code>.style.fontWeight = </code><code>"normal"</code><code>;</code>

<code>    </code><code>document.getElementById(</code><code>"closeLogin"</code><code>).onclick = </code><code>function</code> <code>removeObj() {</code>

<code>        </code><code>document.getElementById(</code><code>"divModal"</code><code>).style.display = </code><code>"none"</code><code>; </code><code>//隐藏"模态"DIV</code>

<code>        </code><code>document.body.removeChild(bgObj); </code><code>//删除背景层Div</code>

<code>    </code><code>}</code>

<code>}</code>

<code>var</code> <code>i = 100;</code>

<code>function</code> <code>scall() {</code>

<code>    </code><code>var</code> <code>divModal = document.getElementById(</code><code>"divModal"</code><code>);</code>

<code>    </code><code>var</code> <code>w_width = $(window).width();</code>

<code>    </code><code>var</code> <code>w_heitht = $(window).height();</code>

<code>    </code><code>var</code> <code>div_width = divModal.style.width;</code>

<code>    </code><code>var</code> <code>div_height = divModal.style.height;</code>

<code>    </code><code>var</code> <code>i_width = parseInt(div_width.substr(0, div_width.length - 2));      </code><code>//div的宽度</code>

<code>    </code><code>var</code> <code>i_height = parseInt(div_height.substr(0, div_height.length - 2));   </code><code>//div的高度</code>

<code>    </code><code>divModal.style.left = (w_width / 2 - i_width / 2) + </code><code>"px"</code><code>;</code>

<code>    </code><code>divModal.style.top = (w_heitht / 2 - i_height * 0.6) + </code><code>"px"</code><code>;</code>

<code>window.onscroll = scall;    </code><code>//屏幕滚动事件</code>

<code>window.onresize = scall;    </code><code>//屏幕大小改变事件</code>

<code>window.onload = scall;      </code><code>//加载屏幕</code>

2、测试页面，先引入jquery，再引入上面的脚本。

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code>

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/jquery-1.7.2.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/ModalDIV.js"</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>input</code> <code>id</code><code>=</code><code>"Button1"</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>'弹出"模态"DIV'</code>  <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"divModal"</code> <code>style="display: none; position: fixed; background-color:#BDE747;</code>

<code>        </code><code>border-color: Black; border-style: solid; border-width: thin; width: 200px; height: 200px;</code>

<code>        </code><code>float: left; z-index: 10001;"&gt;</code>

<code>        </code><code>&lt;</code><code>div</code> <code>style</code><code>=</code><code>"height: 25px; background-color:Green;"</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>span</code> <code>id</code><code>=</code><code>"closeLogin"</code> <code>style</code><code>=</code><code>"margin: 3px; float: right; cursor: pointer; font-size: large;"</code><code>&gt;</code>

<code>                    </code><code>关闭</code>

<code>            </code><code>&lt;/</code><code>span</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>center</code><code>&gt;&lt;</code><code>h2</code><code>&gt;HelloWorld!&lt;/</code><code>h2</code><code>&gt;&lt;/</code><code>center</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;&lt;</code><code>br</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>center</code><code>&gt;到底啦！&lt;/</code><code>center</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

上面6、7行中的src地址被51CTO转换了，应酌情处理。第10行的onclick="showModalDiv();"被干掉，我是愤怒！

3、截图。

<a target="_blank" href="http://blog.51cto.com/attachment/201306/133139852.jpg"></a>

*** Updated 2013-06-27 ***

本文转自walker snapshot博客51CTO博客，原文链接http://blog.51cto.com/walkerqt/869587如需转载请自行联系原作者

RQSLT