ホームページ > 記事 > ウェブフロントエンド > JavaScript がモーダル ダイアログ ボックスのソース コードを実装する collection_javascript スキル
JavaScript がモーダル ダイアログ ボックスのソース コードを実装する collection_javascript スキル
- WBOYオリジナル
- 2016-05-16 18:53:291229ブラウズ
まず、ダイアログ ボックスについて説明します。
ダイアログ ボックスは、Windows アプリケーションで非常に一般的に使用され、多くのアプリケーション設定やユーザーとの対話にダイアログ ボックスが必要となるため、Windows アプリケーションではダイアログ ボックスが最も重要です。ユーザーと対話するための重要な手段。ダイアログ ボックスは特殊なウィンドウであり、ウィンドウ上のあらゆる操作 (移動、最大化、最小化など) もダイアログ ボックス内で実行できます。
ダイアログ ボックスは、次の 2 つのタイプに大別できます。
(1) モーダル ダイアログ ボックス: モーダル ダイアログ ボックスが表示されると、ユーザーはダイアログ ボックスを閉じた後にのみ実行を続行できます。 . ダイアログ ボックスを閉じる前に、アプリケーションの他の部分からコードを実行する機能。モーダル ダイアログ ボックスでは通常、ユーザーが何らかの選択をする必要があります。
(2) 非モーダル ダイアログ ボックス: 非モーダル ダイアログ ボックスが表示された後、プログラムはダイアログ ボックスを閉じることなく実行を続行でき、ユーザーは他のコードに転送するときに何もする必要がありません。アプリケーションの一部が応答します。モードレス ダイアログ ボックスは通常、情報を表示したり、リアルタイムで設定を行ったりするために使用されます。
モーダルウィンドウは、従来のプログラミング言語では非常に一般的です。簡単に言うと、モーダルの場合、子ウィンドウが閉じていないと、その親ウィンドウは操作できず、元のプログラムが実行されません。中断された場合は、元のプログラムに戻り、モーダル ウィンドウが閉じるまで続行します。
非モーダルなものは直接表示され、その後元のプログラムが以下のステートメントを実行し続けます。その他のウィンドウも使用できます。
モーダル ダイアログ ボックスはユーザーの入力を独占します。モーダル ダイアログ ボックスが開かれると、ユーザーはダイアログ ボックスを操作することしかできず、他のユーザー インターフェイス オブジェクトは入力情報を受け取ることができません。アプリケーションで使用されるほとんどのダイアログ ボックスはモーダル ダイアログ ボックスです。
通常、windwo.open またはブラウザのハイパーリンク経由でポップアップする新しいウィンドウは非モーダル ウィンドウですが、モーダル ウィンドウは他のイベントに応答するために閉じる必要があるアラートのようなウィンドウです。
ダイアログ ボックスのモダリティと非モダリティを理解するために、次のことを見てみましょう。B/S 構造アプリケーションの開発では、ユーザーが後で元のウィンドウの前に残るサブウィンドウを開いてほしい場合があります。
IE では、window.showModelessDialog() メソッドを使用して、HTML コンテンツを表示する非モーダル ダイアログ ボックスを作成できます。 window.showModalDialog() メソッドは、HTML コンテンツを表示するモーダル ダイアログ ボックスを作成するために使用されます。これはダイアログ ボックスであるため、通常 window.open() で開かれるウィンドウのプロパティがすべて含まれているわけではありません。
これは window.showModalDialog ポップアップ ウィンドウのインスタンス関数です:
例:
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、開かれたウィンドウはモーダル ウィンドウではありません。例は次のとおりです:
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 はモーダル ダイアログ ボックスを実装します。 >
ダイアログ ボックスの CSS を自分で定義できます。CSS の本文で margin:0 を定義する必要があることに注意してください。そうしないと、周波数をロックするときにギャップが発生し、不完全な周波数ロックの問題が発生します。 1 つは、IE の zIndex が非常に高いため、周波数ロック レイヤーでそれをカバーできないという問題です。1 つは非表示にする方法、もう 1 つは無効にする方法です。属性が false に設定されている場合、2 番目の方法では編集を無効にすることしかできませんが、それでも周波数ロック レイヤーに騙されてしまい、効果が良くないため、非表示にすることをお勧めします。
11 22
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 result = window.showModalDialog(url, '', 'status:no; help:no;');
(2). 在该 asp.net 页面的 Page_Load 方法里设定不缓存：
Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
}
问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。
缘起：考虑如下页面的代码
<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 控件开发者引起注意）
幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：
<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">
スクリプト >
ボディ>
html> 6. div を使用して JavaScript モーダル ウィンドウを模倣します
コードをコピーします