模态(modal)窗口的实现方法？

priestmoon 2010-04-22 04:53:28

众所周知，模态(modal)窗口就是指悬浮于屏幕最前端，无法通过点击其他窗口切换的一种独占式窗口。
这个在C/S架构下很容易实现。
但是在B/S架构下，如何建立浏览器环境下的模态窗口，是一个问题。
我在看jquery-ui的demo时第一次发现了B/S下的模态窗口，并且很好奇它是怎么实现的，
于是就看了看相关代码。
可惜，本人水平太菜再加上jquery对js的封装，一直没搞明白是怎么回事。
所以就发帖想问一下哪位知道：

js实现模态窗口的原理和关键代码是什么？

...全文

496 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

beeing007 2012-04-09

打赏
举报

window.showModalDialog("参数值") 就这个傻逼吧？

rainsilence 2010-04-22

打赏
举报

快下班了。我跟你讲下思路把

你说的模态不是真的模态。而是用两个Div模拟的。
两个Div都设置成绝对定位，然后第一个div，z-index设置成1000。半透明，把整个页面罩住
第二个div，z-index设置成1001，盖在遮罩层之上。

priestmoon 2010-04-22

打赏
举报

还有怎么让模态窗口在firefox中居中显示？

priestmoon 2010-04-22

打赏
举报

[Quote=引用 3 楼 cloudgamer 的回复:]

因为ff不支持showModalDialog
[/Quote]

那怎么解决FF下的模态窗口的创建问题？
jquery-ui的modal dialog在FF下也能正常运行的。

cloudgamer 2010-04-22

打赏
举报

因为ff不支持showModalDialog

priestmoon 2010-04-22

打赏
举报



<!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>

    <title></title>

    

    <script type="text/javascript">

        function cc() {

            window.showModalDialog("form-table-8.htm", "",

           "dialogHeight:286px; dialogWidth:408px; center:yes; resizable:no");

        }

    </script>

</head>

<body>

    <input type="button" value="click" onclick="cc();" />

</body>

</html>