ホームページ  >  記事  >  ウェブフロントエンド  >  javascript デモ モーダル window_javascript スキル

javascript デモ モーダル window_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 18:40:181157ブラウズ

次のデモはコールバックをサポートしており、modalDialog.js を参照することで直接使用できます。Jquery
global.js

コピー コード コードは次のとおりです:
window.js = new myJs(); //名前の重複を避けるために、名前を変更し、myJs オブジェクトを window オブジェクトにアタッチします。次に、ページ内の window を呼び出します。js
//js object
function myJs() {
this.x = 10;
}
//myJs.prototype.alert = function (msg) {alert(msg) } //アラート メソッドのテストは js.alert('pop-up Prompt') を呼び出します。
//指定された ID を持つ dom オブジェクトを取得します。
myJs.prototype.$ = function ( id) { return document.getElementById(id); }
myJs.prototype.bodyWidth = document.documentElement.clientWidth
myJs.prototype.bodyHeight = document.documentElement; .clientHeight;
myJs.prototype.body = document.body;


modalDialog.js ファイルのコードは次のとおりです。
コードをコピー


コードは次のとおりです:
//Modaldialog function modalDialog() { this.uri ="about:ブランク"; //アドレスthis.title = null; / /タイトルthis.width = 400; //デフォルトの幅
this.height = 300; //デフォルトの高さ
this.borderColor = "black"; // 境界線の色
this.borderWidth = 2; // 境界線の幅
this.callback = null; //コールバックメソッド
this.background = "black"; .titleBackground = "silver";
}
modalDialog.prototype.url = this.uri; //これは拡張子なしでも可能ですが、ページにはこのプロパティが見つからないというメッセージのみが表示されます。 .title = this.title;
modalDialog.prototype.width = this.width;
modalDialog.prototype.background = this.background; .prototype.borderWidth = this.borderWidth;
modalDialog.prototype.titleBackground = this.callback; >//トリガーコールバックメソッド
modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != null) this.callback(); >//Show
modalDialog.prototype.show = function () {
var js = window.js;
//
var x = js.bodyWidth, y = js 内に表示の詳細を実装します.bodyHeight;
//まずボディ全体を覆うレイヤーマスクを作成します
var zdiv = "zdiv"; //レイヤー ID をマスクします
document.body.innerHTML = "
";
var mdiv = "mdiv"; //モーダルウィンドウレイヤーID
document.body. innerHTML = "
"
//タイトルを追加
(this.title ! = null ? "
" this.title "
" : "" )
"