javascript如何实现真正的模态窗口?

Harryfin 2013-06-07 09:24:30
网上普遍都是说三层锁屏,但这不是真正的模态窗口。

真正的模态窗口不但能禁止背景输入,而且还要能中断代码执行,直到点击确认或取消后,代码才继续执行

请问这个在javascript中应该怎么实现呢?求例子
...全文
179 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
地狱羔羊 2013-06-07
  • 打赏
  • 举报
回复
靠JS模拟是实现不了的..只有IE以及部分浏览器自带的showModalDialog方法可以..
bichir 2013-06-07
  • 打赏
  • 举报
回复
引用 4 楼 showbo 的回复:
模拟的都无法挂起js代码执行,都是基于回调的机制。 showModalDialog方法可以,但是低版本的firefox和有些浏览器不支持
+1
  • 打赏
  • 举报
回复
模拟的都无法挂起js代码执行,都是基于回调的机制。 showModalDialog方法可以,但是低版本的firefox和有些浏览器不支持
Harryfin 2013-06-07
  • 打赏
  • 举报
回复
根本就不行,你试试改成这样后面的alert会不会马上出现? 我要的效果是点了确定后才继续执行后面的alert

window.onload = function() {
   showDiv();
   alert(1);
}
2013-06-07
  • 打赏
  • 举报
回复
老赵有个异步执行的类库Jscex,可以去试下 http://jeffreyzhao.cnblogs.com/
  • 打赏
  • 举报
回复
<!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" />
    <title>基于JQuery的JS遮罩层效果</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
    function showDiv() {
        document.body.style.overflow = 'hidden';
        var docHeight = Math.max(document.documentElement.scrollHeight,
        document.documentElement.clientHeight);
        var docWidth = Math.max(document.documentElement.scrollWidth,
        document.documentElement.clientWidth);
        var _div = document.createElement('div');
        _div.className = 'divClass';
        _div.setAttribute('id', 'divId');
        document.body.appendChild(_div);
        document.getElementById('divId').style.width = docWidth + 'px';
        document.getElementById('divId').style.height = docHeight + 'px';
        var _divAlert = document.createElement('div');
        _divAlert.className = 'divalert';
        _divAlert.id = 'divalert';
        document.body.appendChild(_divAlert);
        document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
        document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
        var _divContent = document.createElement('div');
        _divContent.id = 'divcontent';
        _divAlert.appendChild(_divContent);
        var _divbtn = document.createElement('div');
        _divbtn.id = 'divbtn';
        var _btn = document.createElement('input');
        _btn.type = 'button';
        _btn.value = '确定';
        _btn.id = 'btn';
        _divbtn.appendChild(_btn);
        _divAlert.appendChild(_divbtn);
        document.getElementById('btn').onclick = function() {
            document.getElementById('divId').style.display = 'none';
            document.getElementById('divalert').style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    }
    function resizeDiv() {
        var docHeight = Math.max(document.documentElement.scrollHeight,
        document.documentElement.clientHeight);
        var docWidth = Math.max(document.documentElement.scrollWidth,
        document.documentElement.clientWidth);
        document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
        document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
    }
    window.onload = function() {
       showDiv(); 
    }
    window.onresize = resizeDiv;
    </script>
    <style type="text/css">
    body { margin:0; padding:0; }
    .divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
    .divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
    #divcontent { height:60px; }
    #divbtn { height:40px; background-color:#ddd; text-align:center; }
    #btn { border:1px solid #000; margin-top:10px; }
    </style>
    </head>
    <body>
    <div style='height:1000px;'>fsfs</div>
    </body>
    </html>
Harryfin 2013-06-07
  • 打赏
  • 举报
回复
引用 4 楼 showbo 的回复:
模拟的都无法挂起js代码执行,都是基于回调的机制。 showModalDialog方法可以,但是低版本的firefox和有些浏览器不支持
看来只好换个思路了,悲剧。。。

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧