jQuery ダイアログ ポップアップ レイヤー ダイアログ plug-in_jquery

原理は非常に簡単です。JS を介して div レイヤーを動的に構築し、それを本文に挿入します。次に、位置の CSS プロパティを絶対値または固定値に調整して、元のドキュメント フローの位置から分離します。その後、適切な処理を行うことで美しくすることができます。

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

>

title
; /a>

2 つの div レイヤーの構造。最初の背景マスク レイヤーは必要な場合にのみ作成されます。各 div は CSS クラスを定義するため、外観を簡単にカスタマイズできます。

いくつかの基本関数の実装
フレームを移動
mousemove イベント内である限り、2 つのマウス位置の差と、移動されたフレームの元の上部と左を計算します。ダイアログ ボックスの新しい場所。 Mousemove イベントは、マウスがタイトル バーを押したときにのみトリガーする必要があるため、タイトル バーの Mousedown イベントがトリガーされたときにのみマウスムーブ イベントがバインドされ、マウスが放されたときにもマウスムーブ イベントはアンバインドされます。 Mousemove イベントのバインドを解除する

mousemove と Mouseup は、タイトル バーではなくドキュメントにバインドされます。その理由は、マウスの動きが速すぎると、タイトル バーの範囲外に移動してしまう場合があるためです。このとき、タイトルバーのイベントにバインドされている場合は無効となりますが、ドキュメントにバインドされている場合は無効となります。

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

var Mouse={x:0,y :0} ;
function moveDialog(event)
{
var e = window.event ||
var top = parseInt(dialog.css('top')) (e.clientY - マウス。y);
var left = parseInt(dialog.css('left')) (e.clientX - Mouse.x); ;
mouse.x = e.clientX;
mouse.y = e.clientY>}; >var e = window.event ||
mouse.x = e.clientX;
$(document).bind('mousemove',moveDialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', moveDialog);


配置
IE の clientWidth や offsetWidth などの一連の属性は他のブラウザとは少し異なるため、これらの属性は使用せず、width() 関数を直接使用します。 jQuery の下:

コードをコピー


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

var left = ($( window).width() - ダイアログ.幅 ()) / 2; var トップ = ($(ウィンドウ).height() - ダイアログ.高さ()) / 2; dialog.css({top :top,left:left});IE6 固定モードはありませんが、window.onscroll イベントを通じてシミュレートできます: // top ダイアログ ボックスからビジュアル領域の上部までの距離。

var top = parseInt(dialog.css('top')) - $(document).scrollTop();

var left = parseInt(dialog.css('left')) - $(document)。 scrollLeft();
$(window).scroll(function(){
dialog.css({'top':$(document).scrollTop() top,'left':$(document).scrollLeft () left});
});


z-index
複数のダイアログ ボックスを共存させるために、静的な zIndex 変数を使用してそれぞれ新しいダイアログ ボックスを作成しますtime 毎回、自動インクリメント操作が実装され、最後に作成されたダイアログ ボックスが常に前面に表示されるように、新しく作成されたダイアログ ボックスの z インデックスに新しい値が割り当てられます。

外部インターフェース
プラグインは次の方法で呼び出されます:

コードをコピー


コード

var dlg = new Dialog(content, options); dlg.show(); もちろん、一般的な用途であれば、より単純にすることができます。 🎜>new Dialog(content, options ).show(); // または dialog(content, options); プラグインをさらに制御するために、次の 4 つの関数を使用することもできます。 🎜>

show(): Display the dialog box
hide(): Hide the dialog box, but does not delete the content in the dialog box.
close(): Close the dialog box and completely delete its content.
setContent(content): Change the content in the dialog box.
Constructor parameters
The constructor has two parameters. content and options. content represents the content of the dialog box; options represents the various configuration options of the dialog box.

content can be a string representing the displayed content. Or an Object type. If it is an Object type, it needs to contain the following two attributes: type and value. Type represents the data type, and value is the content corresponding to type. type accepts the following types:

id: displays the content of a certain ID, but does not include the content of the ID itself. value corresponds to the ID value of a certain HTML element.
img: Display an image. value corresponds to the uri of the image.
url: Display the content of a certain URL through ajax, so it must be under the same domain name. value is the corresponding URL address.
iframe: Display the content specified by a URL into an iframe. It removes some restrictions on AJAX calls (with the same domain name, the returned HTML code cannot contain headers, etc.). value is the corresponding URL.
options are specific settings for Dialog behavior and appearance:

选项
名称	描述	默认值
title	标题栏的文本	标题
closeText	关闭按钮文字	[关闭]
showTitle	是否显示标题栏，若为否，则标题和关闭按钮都将不显示。	true
draggable	是否可以拖动框体。	true
modal	模态对话框，若为是，则不可操作背景层。	true
center	是否居中显示，若为否，则通过CSS中的内容进行定位。	true
fixed	对话框是否跟随滚动条移动。	true
time	自动关闭对话框时间，单位毫秒，若为0，表示不会自动关闭。	0
id	对话框的ID。若为false，则表示自动产生。	false
回调函数
名称	描述	返回值类型
beforeShow	在显示之前调用，若返回false，则不显示对话框。	bool
afterShow	显示之后调用。	无
beforeHide	在隐藏之前调用，若返回false，则不隐藏对话框。	bool
afterHide	隐藏之后调用。	无
beforeClose	在关闭之前调用，若返回false，则不关闭对话框。	bool
afterClose	关闭之后调用。	无

Custom CSS

The plug-in provides a CSS class name for each part of the dialog box, making it easy to customize the CSS:

类名	描述
.dialog-overlay	模态对话框时，的背景遮盖层。
.dialog	对话框的CSS。
.dialog .bar	标题栏的CSS。包含了标题和关闭按钮。
.dialog .bar .title	标题栏的标题部分。
.dialog .bar .close	标题栏的关闭按钮部分。
.dialog .content	内容部分。

You can directly modify these CSS classes to make global modifications, or you can modify a certain dialog box by adding the id and class name.

Copy code The code is as follows:

/* Only modify the dialog box with the id #dialog. */
#dialog1 .bar
{
text-transform:lowercase;
}
// Specify the id of the dialog box through the id attribute.
new Dialog('text',{id:'dialog1'});

Online demo code
Code package download

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。