• DIV模拟模式对话框window.showModalDialog效果


         Hi all, 对话框在Windows应用程序中使用非常普遍,许多应用程序的设定,与用户交互需要通过对话框来进行,因此对话框是Windows应用程序中最重要的界面元素之一,是与用户交互的重要手段。对话框是一个特殊的窗口,任何对窗口进行的操作(如移动、最大化、最小化等)也可以在对话框实施。
    对话框大致可以分为以下两种。
    (1)模态对话框:模态对话框弹出后,独占了系统资源,用户只有在关闭该对话框后才可以继续执行,不能够在关闭对话框之前执行应用程序其他部分的代码。 模态对话框一般要求用户做出某种选择。
    2)非模态对话框:非模态对话框弹出后,程序可以在不关闭该对话框的情况下继续执行,在转入到应用程序其他部分的代码时可以不需要用户做出响应。非模 态对话框一般用来显示信息,或者实时地进行一些设置。
    模态窗口在传统编程语言中很常见,简单的说就是,如果是模态的,就是打开一个子窗口,如果这个子窗口不关闭,就不能操作它的父窗口,原来程序暂停执行 ,直到这个模态窗口关闭后才回到原来程序继续。 非模态的就是直接显示出来,然后原来的程序继续执行下面的语句,而且其他窗口也呈可用状态。

     比较常见的是window.open和window.showModelDialog方法,分别代表非模式对话框和模式对话框。然而有时候会遇到这样的情况:客户考虑安全隐患,不允许在程序中使用window.showModelDialog(模式对话框)弹出。这样的话我们就需要自己用DIV做一个类似的模式对话框的效果:下面是我自己写的一个简单的应用。 请点击按钮看看有什么效果

    鉴于朋友们的意见,现在粘跌代码如下:

    <style>
    div#mbDIV
    {
    position
    : absolute;
    top
    : 0px;
    left
    : 0px;
    width
    :expression(document.body.scrollWidth+"px");
    height
    :expression(document.body.scrollHeight+"px");
    background-color
    : #AAAAAA;
    z-index
    : 10;
    filter
    : alpha(opacity=80);opacity:0.8;
    }
    div#loginDIV
    {
    position
    : absolute;
    width
    : 500px;
    height
    : 180px;
    background-color
    :white;
    z-index
    : 20;
    }
    div#loginTopDIV
    {
    width
    : 100%;
    height
    : 22px;
    text-align
    :center;
    background-color
    : blue;
    cursor
    : move;
    }
    </style>
    <script>
    function btnAnswer()
    {
        
    if(window.confirm("能告诉我你的名字吗?谢谢!"))
            alert(
    "欢迎你");
        
    else
        {
            alert(
    "你哇假打哈!")
        }
        closeDIV();
    }
    </script><script type="text/javascript" src="https://files.cnblogs.com/Charles2008/DIVDialog.js" defer="defer"></script>
    <div id="mbDIV" style="display: none;"></div>
    <div id="loginDIV" style="display: none; left: 300px; top: 200px">
    <div id="loginTopDIV">用DIV模拟的对话框</div>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
        
    <tr>
                
    <td align="center" colspan="2">这里就对话框中的内容,且支持拖动功能,欢迎测试! </td>
            
    </tr>
            
    <tr>
                
    <td align="center"><input onclick="btnAnswer();" type="button" value="回答问题"></td>
                
    <td align="center"><input onclick="closeDIV()" type="button" value="关闭"> </td>
            
    </tr>
        
    </table>
    </div>
    <div align="center"><input onclick="openDIV()" type="button" value="测试DIV模拟showModalDialog对话框"> </div>
    希望朋友们提出宝贵的意见。谢谢。
  • 相关阅读:
    NYOJ-括号配对问题--------待解决,RE
    NYOJ-小猴子下落
    UVA401
    UVA11059
    生成1-N的排列
    C++ STL, next_permutation用法。
    C++ STL, set用法。 待更新zzzzz
    C++ STL, sort用法。
    C++中getline的用法
    TCP系列34—窗口管理&流控—8、缓存自动调整
  • 原文地址:https://www.cnblogs.com/Charles2008/p/1364857.html
Copyright © 2020-2023  润新知