JavaScript でポップアップ ウィンドウを作成する方法

この記事では、JavaScript

を使用してポップアップウィンドウを作成する方法を共有します

各ポップアップウィンドウの識別
var x =0;

var idzt = new Array();

var Window = function(config){

IDは繰り返されません
idzt[x] = "zhuti "+x; ポップアップ ID

初期化、パラメータの受け取り
this.config = {
width : config.width || width
height : 200, height
button s : config. ボタン || ''、デフォルトではボタンなし
title: config.title || 'title'、content
isMask: config.isMask == false? false：config.ismask ||。 = "

";
$("body").app
end
(nr) ;

ポップアップ ウィンドウのタイトルを読み込みます
var content ="< p id='title"+x+"' class='title' bs='"+x+"'>"+this.config.title+"< ;p id='close"+x+"' class='close' bs='"+x+"'>×

";
ポップアップコンテンツをロード var nrh = this .config.height - 75; content = content+"

"+this.config.content+"";
読み込みボタン content = content+"

"+this.config.buttons+"";
タイトル、コンテンツ、ボタンをウィンドウに追加します
$('#'+idzt[x]).html(content);


マスク レイヤーを作成します

if
(this.config.isMask )
{
var zz = "

";
$("body"). append(zz);
$("#zz").css('
display
','block');
} ページ外への移動を避けるための最大および最小の制限
var maxX = $(window)。 width()-this.config.width;
var maxY = $(window) .height()-this.config.height;
var minX = 0,
minY = 0; ウィンドウの移動
if(this.config .isDrag)
{
マウス移動ポップアップウィンドウ
$(".title") .Bind ("mouseDown", function (e) {

var n = $ (this) .Anttr ("bs"); Takeロゴ
を最上位レイヤーで選択します
(".zhuti"). CSS (CSS ( "
z-index-", 3);
$ ('#+idzt [n]). Css (" z-index", 4);
endY = 0、移動後のY座標
startX = parseInt($('#'+idzt[n]).css("left"))、ポップアップレイヤーの初期X座標
startY = parseInt($('#' +idzt[n]).css("top"))、ポップアップ レイヤーの初期 Y 座標
downX = e.clientX、マウスが押されたときの X 座標ネズミの
downY = e.clientY; マウスが押されたときのマウスの Y 座標
endX = es.clientX + start X; & lt; 0) {
endx = 0; if (エンディ & gt; maxy) { endy = maxy;
} else if (endy & lt; 0) {
endy = 0; ('#'+idzt[n]).css("top",endY+"px");
$('#'+idzt[n]).css("left",endX+"px");
Window.getselection ()
all
range
s ():
Document
.Selection.empty (); // 中国語のテキストをキャンセルします
}}) }}); $("body").bind("mouseup",function(){ $(") body "）。 ; マスクを外します
}})

x ++;

以上がJavaScript でポップアップ ウィンドウを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。