この記事では、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+" p>";
読み込みボタン content = content+""+this.config.buttons+" p>";
タイトル、コンテンツ、ボタンをウィンドウに追加します
$('#'+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 サイトの他の関連記事を参照してください。