JavaScript がモーダルダイアログボックスのソースコードを実装する collection

まず、ダイアログボックスについて説明します。
ダイアログボックスは、Windows アプリケーションで非常に一般的に使用され、多くのアプリケーション設定やユーザーとの対話にダイアログボックスが必要となるため、Windows アプリケーションではダイアログボックスが最も重要です。ユーザーと対話するための重要な手段。ダイアログボックスは特殊なウィンドウであり、ウィンドウ上のあらゆる操作 (移動、最大化、最小化など) もダイアログボックス内で実行できます。
ダイアログボックスは、次の 2 つのタイプに大別できます。
(1) モーダルダイアログボックス: モーダルダイアログボックスが表示されると、ユーザーはダイアログボックスを閉じた後にのみ実行を続行できます。 . ダイアログボックスを閉じる前に、アプリケーションの他の部分からコードを実行する機能。モーダルダイアログボックスでは通常、ユーザーが何らかの選択をする必要があります。
(2) 非モーダルダイアログボックス: 非モーダルダイアログボックスが表示された後、プログラムはダイアログボックスを閉じることなく実行を続行でき、ユーザーは他のコードに転送するときに何もする必要がありません。アプリケーションの一部が応答します。モードレスダイアログボックスは通常、情報を表示したり、リアルタイムで設定を行ったりするために使用されます。
モーダルウィンドウは、従来のプログラミング言語では非常に一般的です。簡単に言うと、モーダルの場合、子ウィンドウが閉じていないと、その親ウィンドウは操作できず、元のプログラムが実行されません。中断された場合は、元のプログラムに戻り、モーダルウィンドウが閉じるまで続行します。
非モーダルなものは直接表示され、その後元のプログラムが以下のステートメントを実行し続けます。その他のウィンドウも使用できます。
モーダルダイアログボックスはユーザーの入力を独占します。モーダルダイアログボックスが開かれると、ユーザーはダイアログボックスを操作することしかできず、他のユーザーインターフェイスオブジェクトは入力情報を受け取ることができません。アプリケーションで使用されるほとんどのダイアログボックスはモーダルダイアログボックスです。
通常、windwo.open またはブラウザのハイパーリンク経由でポップアップする新しいウィンドウは非モーダルウィンドウですが、モーダルウィンドウは他のイベントに応答するために閉じる必要があるアラートのようなウィンドウです。
ダイアログボックスのモダリティと非モダリティを理解するために、次のことを見てみましょう。B/S 構造アプリケーションの開発では、ユーザーが後で元のウィンドウの前に残るサブウィンドウを開いてほしい場合があります。
IE では、window.showModelessDialog() メソッドを使用して、HTML コンテンツを表示する非モーダルダイアログボックスを作成できます。 window.showModalDialog() メソッドは、HTML コンテンツを表示するモーダルダイアログボックスを作成するために使用されます。これはダイアログボックスであるため、通常 window.open() で開かれるウィンドウのプロパティがすべて含まれているわけではありません。
これは window.showModalDialog ポップアップウィンドウのインスタンス関数です:

コードをコピーしますコードは次のとおりです:

例:

コードをコピーコードは次のとおりです。

('http://www.jb51.net ', '500px', '400px', 'no')">Click

showmodaldialog() は FireFox ブラウザではサポートされていないことに注意してください。これは次の理由によるものです。元の MozillaSuite (Firefox はこのスイートから派生したもの) では showmodaldialog() をサポートしていましたが、後に showmodaldialog() にはセキュリティ上のリスクがあることが判明し、showmodaldialog() のサポートはバグ 194404 が送信される前にすぐに削除されました。より良い解決策が見つかるまで、Firefox は showmodaldialog() をサポートしないと思います。
ポップアップウィンドウを開くには、window.open を使用するだけでこの機能を実現できます。 window.open の構文は次のとおりです。
oNewWindow = window.open( [sURL] [, sName] [, sFeature] [, bReplace ])

Firefox で開いたウィンドウを Firefox と同じにしたい場合、sFeature は window.open のパラメータにさらにいくつかの関数設定を持っています。 IE の showModalDialog、モーダルを sFeature =yes に追加するだけで十分です。おそらくセキュリティ上の理由から modal=yes、開かれたウィンドウはモーダルウィンドウではありません。例は次のとおりです:

コードをコピーコードは次のとおりです:

oNewWindow = window.open( [sURL] [, sName] [, sFeature] [, bReplace])

Firefox の showModalDialog メソッドでは利用できないため。次に、両方のブラウザと互換性を持たせるために次の判断を使用します: 

コードをコピーしますコードは次のとおりです:

<スクリプト言語="JavaScript"> ;!--
function showDialog(url)
{
if( document.all ) //IE
{
feature="dialogWidth:300px;dialogHeight:200px;status:no ; help:no";
window.showModalDialog(url,null,feature);
}
else
{
//modelessDialog はモーダルを Dialog=yes に置き換えることができます
feature =" width=300,height=200,menubar=no,toolbar=no,location=no,";
feature ="scrollbars=no,status=no,modal=yes";
window.open( url, null,feature);
}
}
//->

2. JavaScript div はモーダルダイアログボックスを実装します。 >

163 メールボックスダイアログボックスと同様の機能。この効果を実現するには主に 2 つのレイヤーがあり、最初のレイヤーは以下のページ全体をロックするために使用され、filter:alpha(opacity=50) を使用できます。ダイアログボックスの内容を表示するために使用されるレイヤーもあるため、zIndex パラメーターは周波数ロックレイヤーよりも高く設定する必要があります。

ダイアログボックスの CSS を自分で定義できます。CSS の本文で margin:0 を定義する必要があることに注意してください。そうしないと、周波数をロックするときにギャップが発生し、不完全な周波数ロックの問題が発生します。 1 つは、IE の zIndex が非常に高いため、周波数ロックレイヤーでそれをカバーできないという問題です。1 つは非表示にする方法、もう 1 つは無効にする方法です。属性が false に設定されている場合、2 番目の方法では編集を無効にすることしかできませんが、それでも周波数ロックレイヤーに騙されてしまい、効果が良くないため、非表示にすることをお勧めします。

コードをコピーコードは次のとおりです:

`````

11 22

三、JavaScript模态对话框取父页的值
1. a.htm 父页
showModalDialog("b.htm");
HTML要素あり
2.b.htm 弹出页面
能否在 b.htm 上取到 a.htm 中 t1 值 ?
回答:
a.html 内に配置
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
b.html 内
<script> <br>window.Value={key:"父页面に戻る"} <br></script>
四、模态对话框模仿MessageBox

复制代码代码如下:

模态对话框

五、showModalDialog 打开的模态对话框有不少经典的缺陷，解决办法

showModalDialog 打开的模态对话框有不少经典的缺陷，在这里不再冗述，我只谈谈最近碰到的几个问题以及解决办法。

问题1. showModalDialog 打开一个 aspx 页面时，如果该页面在之前已经打开过一次，则自动会加载缓存中的页面，而不能显示最新数据。

解决的办法有两种：

(1). 在打开模态框时，给 url 后面多加一个随机参数，来避免页面被缓存：

var url = 'EditFlowNode.aspx?flowId=0&id=2&x=' + Math.random();
var result = window.showModalDialog(url, '', 'status:no; help:no;');

(2). 在该 asp.net 页面的 Page_Load 方法里设定不缓存：

protected void Page_Load(object sender, EventArgs e){
    Response.Expires = 0;
    Response.Cache.SetNoStore();
    Response.AppendHeader("Pragma", "no-cache");
}

问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。

缘起：考虑如下页面的代码

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> new document title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
head>

<body>
    <input id="txt1">
    <script type="text/javascript">

    script>
body>
html>

这个页面，如果在普通的 IE 窗口中加载时，提示的信息是 "155"，而在模态对话框中执行时，其数值是 "0"。为什么会这样？

我们注意到普通窗口打开该页面时，当跳出 alert 对话框后，整个页面元素都已经正常显示了；而模态框在打开时，跳出 alert 对话框后，其背景却是一片空白；等点击“确定”后，才会显示出网页内容。
由此可以推测，模态框和普通页面在解析执行 HTML 时的次序不同：

普通页面：依次解析 body 中的元素，并随即绘制(render)解析完的元素。如果碰到 script, 则立刻执行之。

模态对话框：依次解析 body 中的元素，但并未立即绘制(render)它们。如果碰到 script, 则立刻执行之。等 body 都加载完毕后，再依次绘制其中的元素。

由于以上我们示例代码中访问到了 offsetWidth 属性，而我们可以推知，该属性一定是当元素被绘制(render)完毕后，才会自动计算出有意义的数值。所以就导致了问题中看到的现象。

之所以考虑到这个问题，其实是因为我在模态对话框中使用一个第三方控件的时候，出现了 bug，经过调试发现根源的原因在于该控件采用了常用的代码模式来输出其 HTML。也就是在一段 HTML 输出后，紧接着输出其初始化脚本。（这个问题值得 ASP.NET 控件开发者引起注意）

幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：