カスタム ダイアログ box_jquery を実装するための JQuery コード

より豊富なカスタム ダイアログ ボックス機能を取得するために、JQuery を使用してダイアログ ボックス プラグインを作成しました。関連する JavaScript を引用するだけで、豊富なカスタム ダイアログ ボックス機能を取得できます。

プラグインの機能:

CSS を介して外観を制御できます。

ページの任意の要素をダイアログ ボックスとして表示できます。

ダイアログ ボックスがアクティブになると、ダイアログ ボックスの外側の要素はマウス操作を受け入れることができなくなります。

ダイアログボックスはワークエリア内で任意に移動でき、センタリング機能はワークエリアのサイズに応じて適応します。

複雑な JavaScript を記述する必要はなく、単純な HTML 属性で記述するだけです。

テスト後、プラグインは Firefox および IE で正常に動作します。

簡単な使用方法の説明:

JQuery およびダイアログ プラグイン ファイルの引用:

< ;script src=messageBox.js>
関連するボタンを行として定義します:

関連するダイアログ ボックスに表示されるコンテンツを定義します。

JQuery モーダル ダイアログ プラグインは使いやすいですか?

< /tr>

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

/* JQuery 模式对话框插件

* writer: FanJianHan (henryfan@msn.com)

* License: GPL (GPL-LICENSE.txt) licenses.

*/

//是否已初始化过对话框

var MessageOninit = false;

//记录body滚动条的x,y偏移量;显示内容的元素对象，显示内容元素对象的父对象

var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;

//对话框对象，对话框宽度，对话框高度

var MessageBox_win,MessageBox_width,MessageBox_height;

//对话框是否处于移动状态

var MessageBox_Moving = false;


//显示模式提示框

function ShowMessageBox(option)

{

var container,iframe,enabled,enabledframe;

var height=400;

var width =400;

MessageBox_scrolltop =0;

MessageBox_scrollleft =0;

if(!MessageOninit)

{

CreateContainer(option);

MessageOninit = true;

$('#messagebox_close').click(function(){

CloseMessageBox();

});

$(window).resize(function(){

SetStyle(option);

SetEnabledStyle();


});

$(window).scroll(function(e){

MessageBox_scrolltop =document.documentElement.scrollTop;

MessageBox_scrollleft = document.documentElement.scrollLeft;

SetEnabledStyle();

});

MessageBox_win = $(”#messagebox_win”);

$('#messagebox_title').mousedown(handleMouseDown);

$('#messagebox_title').mouseup(handleMouseUp);

$('#messagebox_title').mousemove(handleMouseMove);

document.onmouseup = handleMouseUp;



}



if(option.height)

height = parseInt(option.height);

if(option.width)

width = parseInt(option.width);

MessageBox_height = height;

MessageBox_width = width;

Messagebox_AC = $('#'+option.control);

MessageBox_PC = Messagebox_AC.parent();

Messagebox_AC.css('display',”);

enabled='

'

enabledframe='';

$('#messagebox_enabledframe').remove()_

$('#messagebox_enabled').remove();

$('#messagebox_title').html(option.title);


$('#messagebox_from').append(Messagebox_AC);

SetStyle(option);

$(document.body).append(enabledframe);

$(document.body).append(enabled);

SetEnabledStyle();

$('#messagebox_win').fadeIn(”slow”);



//创建对话框容器

function CreateContainer(option)

{

var html;

html='

';

if(option.parent)

{

$('#' + option.parent).append(html);

}

else

{

$(document.body).append(html);

}

}


//设置显示时背景式样

function SetEnabledStyle()

{

var de,w,h,css,region;

region = GetDocumentRegion();

css ={width:region.width+”px”,height:region.height+”px”,

left: MessageBox_scrollleft+'px',top: MessageBox_scrolltop +'px'}

GetOpacity(css);

$(”#messagebox_enabled”).css(css);

$(”#messagebox_enabledframe”).css(css);

}


//设置透明式样

function GetOpacity(css)

{

if(window.navigator.userAgent.indexOf('MSIE')>=1)

{

css.filter= ‘progid:DXImageTransform.Microsoft.Alpha(opacity=30)';

}

else

{

css.opacity= ‘0.3′;

} 

}


//设置对话框试样

function SetStyle(option)

{

var region,css;

region = GetDocumentRegion();

css ={width:MessageBox_width+'px',height:MessageBox_height+'px',

left: ((region.width - MessageBox_width)/2)+'px',top: ((region.height - MessageBox_height)/2)+'px'}

if(region.height < MessageBox_height )//如果body显示的高度小于对话框高度

{

css.top=10+'px';

}

else

{

css.top=((region.height - MessageBox_height)/2)+'px'

}

$('#messagebox_win').css(css);

css.top='0px';

css.left='0px';

$('#messagebox_table').css(css);

css.width='100%';

css.height='16px';

$('#messagebox_title_td').css(css);

css.height= height-46 +'px';

$('#messagebox_body_td').css(css);



}


var down_x,down_y,cx,cy;

function handleMouseDown(e)

{

var evt = e || event;


down_x=evt.clientX;

down_y = evt.clientY;

cx =(parseInt(MessageBox_win.css('left'))|0);

cy = (parseInt(MessageBox_win.css('top'))|0)

MessageBox_Moving= true;³

document.documentElement.onselectstart = function(){return false};

document.documentElement.ondrag = function(){return false};

document.onmousemove = handleMouseMove;

$(document.body).append('

');

$('#messagebox_move').css('width',MessageBox_win.css('width'));

$('#messagebox_move').css('height',MessageBox_win_u99 ?ss('height'));

$('#messagebox_move').css('left',MessageBox_win.css('left'));

$('#messagebox_move').css('top',MessageBox_win.css('top'));



}


function GetDocumentRegion()

{

var w,h,de;

de = document.documentElement;

w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;

h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;

return {高さ:h,幅:w};

}


関数 handleMouseMove(e)

{

var left,top,region;

if (MessageBox_Moving)

{

var evt = e || イベント;


left =evt.clientX cx-down_x;

top = evt.clientY cy-down_y;

地域 = GetDocumentRegion();

if(left MessageBox_width > region.width)

{

left = region.width - 10- MessageBox_width;

}

if(top MessageBox_height >region.height)³

{

top = region.height-10 - MessageBox_height;

}

if(left
left =10;

if(top
top =10;

var css ={left:left 'px',top:top 'px'}

$('#messagebox_move').css(css);

}

}


関数 handleMouseUp()

{

if(MessageBox_Moving)

{

MessageBox_win.css('width',$('#messagebox_move').css(”width”));

MessageBox_win.css('高さ',$('#messagebox_move').css(”高さ”));

MessageBox_win.css('left',$('#messagebox_move').css(”left”));

MessageBox_win.css('top',$('#messagebox_move').css(”top”));

}

MessageBox_Moving _u61 ? 間違い;

document.onmousemove = null;

$('#messagebox_move').remove();

}



}


//关闭模式对话框

function CloseMessageBox()

{

if(MessageOninit)

{

$('#messagebox_win').hide();

$('#messagebox_enabled').remove();

$('#messagebox_enabledframe').remove();

Messagebox_AC.css('表示','なし');

MessageBox_PC.append(Messagebox_AC);


}

document.documentElement.onselectstart = null;

document.documentElement.ondrag = null;

}

$(document).ready(function(){

$(document).find('[@showoption]').each(function() {

var namevalue;

//虽然表示される元素id,表示度,表示高さ,标题,对话寄居的元素对象id

var option={control :”,width:'400',height:'400',title:”,parent:null};

var properties = $(this).attr('showoption').split(';' );

for(i=0;i
{

namevalue = properties[i].split(':'); 🎜>
if(namevalue.length >1)

{

execute =”option.” namevalue[0] '=” namevalue[1] '';'; 🎜>
eval(実行);

}

}


$(this).click(function(){

ShowMessageBox(オプション);

});

});




messageboxscript.rar

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

4週間前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7650

15

CakePHP チュートリアル

1392

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

73

19

NYTミニクロスワードの回答

36

110

もっと見る