コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

パーソナライズされた Web ページのポップアップ ウィンドウ

伊谢尔伦
リリース： 2017-06-16 10:56:56
オリジナル
1769 人が閲覧しました

看到论坛上有人模仿alert，自己也写了一个。
本来想模仿winapi里的MessageBox 
但可惜js 不支持，阻塞模式。
返回值只能用异步了。
支持FF、ie、opera。
DOCTYPE 可以申明，也可以不申明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MessageBox演示</title>
<script language="javascript">
/*******************************************************************************************
* http://2lin.net
* Email:caoailin@gmail.com
* QQ:38062022
* Creation date: 2006-11-27
* 下面的内容可以拷贝到一个JS文件里面
*********************************************************************************************/
// 控制按钮常量
var MB_OK = 0;
var MB_CANCEL = 1;
var MB_OKCANCEL = 2;
var MB_YES = 3;
var MB_NO = 4;
var MB_YESNO = 5;
var MB_YESNOCANCEL = 6;
// 控制按钮文本
var MB_OK_TEXT = "确定";
var MB_CANCEL_TEXT = "取消";
var MB_YES_TEXT = " 是 ";
var MB_NO_TEXT = " 否 ";
//提示图标
var MB_ICON = "http://www.cnn6.net??/files/080516/1_011452.gif";
//委托方法
var MB_OK_METHOD = null;
var MB_CANCEL_METHOD = null;
var MB_YES_METHOD = null;
var MB_NO_METHOD = null;
var MB_BACKCALL = null;
var MB_STR = &#39;<style type="text/css"><!--&#39; +
&#39;body{margin:0px;}&#39; +
&#39;.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}&#39; +
&#39;.msgbox_control{text-align:center;clear:both;height:28px;}&#39; +
&#39;.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}&#39; +
&#39;.msgbox_content{padding:10px;float:left;line-height: 20px;}&#39; +
&#39;.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}&#39; +
&#39;.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}&#39; +
&#39;.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}&#39; +
&#39;--></style>&#39; +
&#39;<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></div>&#39; +
&#39;<div class="msgbox" style="display:none; z-index:100000;" id="msgBox">&#39; +
&#39;<div class="msgbox_title" id="msgBoxTitle"></div>&#39; +
&#39;<div class="msgbox_icon" id="msgBoxIcon"></div>&#39; +
&#39;<div class="msgbox_content" id="msgBoxContent"></div>&#39; +
&#39;<div class="msgbox_control" id="msgBoxControl"></div></div>&#39;;
var Timer = null;
document.write(MB_STR);
var icon = new Image();
icon.src = MB_ICON;
/* 提示对话框
* 参数 1 : 提示内容
* 参数 2 : 提示标题
* 参数 3 : 图标路径
* 参数 4 : 按钮类型
*/
function MessageBox(){
var _content = arguments[0] || "这是一个对话框！";
var _title   = arguments[1] || "提示";
var _icon    = arguments[2] || MB_ICON;
var _button  = arguments[3] || MB_OK;
MB_BACKCALL  = arguments[4];
var _iconStr = &#39;<img src="{0}">&#39;;
var _btnStr  = &#39;<input name="{0}" id="{0}" type="button" class="msgbox_button" value="{1}" onclick="MBMethod(this)" />&#39;;
switch(_button)
{
case MB_CANCEL      : _btnStr = _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break;
case MB_YES         : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break;
case MB_NO          : _btnStr = _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break;
case MB_OKCANCEL    :
_btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT) + "  " +
_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);
break;
case MB_YESNO       :
_btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "  " +
_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);
break;
case MB_YESNOCANCEL :
_btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "  " +
_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) + "  " +
_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);
break;
default :  _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT);  break;
}
//解决　FF 下会复位
ScrollTop = GetBrowserDocument().scrollTop;
ScrollLeft = GetBrowserDocument().scrollLeft;
GetBrowserDocument().style.overflow = "hidden";
GetBrowserDocument().scrollTop = ScrollTop;
GetBrowserDocument().scrollLeft = ScrollLeft;
$("msgBoxTitle").innerHTML = _title;
$("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon);
$("msgBoxContent").innerHTML = _content;
$("msgBoxControl").innerHTML =  _btnStr;
OpacityValue = 0;
$("msgBox").style.display = "";
try{$("msgBoxMask").filters("alpha").opacity = 0;}catch(e){};
$("msgBoxMask").style.opacity = 0;
$("msgBoxMask").style.display = "";
$("msgBoxMask").style.height = GetBrowserDocument().scrollHeight + "px";
$("msgBoxMask").style.width = GetBrowserDocument().scrollWidth + "px";
Timer = setInterval("DoAlpha()",1);
//设置位置
$("msgBox").style.width = "100%";
$("msgBox").style.width = ($("msgBoxIcon").offsetWidth + $("msgBoxContent").offsetWidth + 2) + "px";
$("msgBox").style.marginTop = (-$("msgBox").offsetHeight/2 + GetBrowserDocument().scrollTop) + "px";
$("msgBox").style.marginLeft = (-$("msgBox").offsetWidth/2 + GetBrowserDocument().scrollLeft) + "px";
if(_button == MB_OK || _button == MB_OKCANCEL){
$("msgBoxBtnOk").focus();
}else if(_button == MB_YES || _button == MB_YESNO || _button == MB_YESNOCANCEL){
$("msgBoxBtnYes").focus();
}
}
var OpacityValue = 0;
var ScrollTop = 0;
var ScrollLeft = 0;
function GetBrowserDocument()
{
var _dcw = document.documentElement.clientHeight;
var _dow = document.documentElement.offsetHeight;
var _bcw = document.body.clientHeight;
var _bow = document.body.offsetHeight;
if(_dcw == 0) return document.body;
if(_dcw == _dow) return document.documentElement;
if(_bcw == _bow && _dcw != 0)
return document.documentElement;
else
return document.body;
}
function SetOpacity(obj,opacity){
if(opacity >=1 ) opacity = opacity / 100;
try{obj.style.opacity = opacity; }catch(e){}
try{
if(obj.filters){
obj.filters("alpha").opacity = opacity * 100;
}
}catch(e){}
}
function DoAlpha(){
if (OpacityValue > 20){clearInterval(Timer);return 0;}
OpacityValue += 5;
SetOpacity($("msgBoxMask"),OpacityValue);
}
function MBMethod(obj)
{
switch(obj.id)
{
case "msgBoxBtnOk" : if(MB_BACKCALL) {MB_BACKCALL(MB_OK);} else {if(MB_OK_METHOD) MB_OK_METHOD();} break;
case "msgBoxBtnCancel" : if(MB_BACKCALL) {MB_BACKCALL(MB_CANCEL);} else {if(MB_CANCEL_METHOD) MB_CANCEL_METHOD();} break;
case "msgBoxBtnYes" : if(MB_BACKCALL) {MB_BACKCALL(MB_YES);} else {if(MB_YES_METHOD) MB_YES_METHOD();} break;
case "msgBoxBtnNo" : if(MB_BACKCALL) {MB_BACKCALL(MB_NO);} else {if(MB_NO_METHOD) MB_NO_METHOD();} break;
}
MB_OK_METHOD = null;
MB_CANCEL_METHOD = null;
MB_YES_METHOD = null;
MB_NO_METHOD = null;
MB_BACKCALL = null;
MB_OK_TEXT = "确定";
MB_CANCEL_TEXT = "取消";
MB_YES_TEXT = " 是 ";
MB_NO_TEXT = " 否 ";
$("msgBox").style.display = "none";
$("msgBoxMask").style.display = "none";
GetBrowserDocument().style.overflow = "";
GetBrowserDocument().scrollTop = ScrollTop;
GetBrowserDocument().scrollLeft = ScrollLeft;
}
String.prototype.toFormatString = function(){
var _str = this;
for(var i = 0; i < arguments.length; i++){
_str = eval("_str.replace(/\\{"+ i +"\\}/ig,&#39;" + arguments[i] + "&#39;)");
}
return _str;
}
function $(obj){
return document.getElementById(obj);
}
///////////////////////////////////////////////////////////////////////////////////////
</script>
<script language="javascript">
function test()
{
var _msg = "<font color=red><b>演示：</b></font><br/>普通对话框！";
MessageBox(_msg);
}
function test1()
{
MB_OK_METHOD = function(){alert(&#39;你按了OK&#39;);}
MB_YES_METHOD = function(){alert(&#39;你按了YES&#39;);}
MB_NO_METHOD = function(){alert(&#39;你按了NO&#39;);}
MB_CANCEL_METHOD = function(){alert(&#39;你按了CANCEL&#39;);}
var _msg = "<font color=red><b>演示：</b></font><br/>调用对话框。是、否、取消";
MessageBox(_msg,"演示",null,MB_YESNOCANCEL);
}
function test2()
{
var _msg = "<font color=red><b>演示：</b></font><br/>调用对话框。是、否、取消";
MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);
}
function test4()
{
var _msg = "<font color=red><b>演示：</b></font><br/>调用对话框。确定、取消";
MessageBox(_msg,"演示",MB_ICON,MB_OKCANCEL,callback);
}
function callback(value)
{
switch(value)
{
case MB_OK : alert(&#39;你按了OK&#39;); break;
case MB_YES : alert(&#39;你按了YES&#39;); break;
case MB_NO : alert(&#39;你按了NO&#39;); break;
case MB_CANCEL : alert(&#39;你按了CANCEL&#39;); break;
}
}
function test3()
{
MB_YES_TEXT = "演示一";
MB_NO_TEXT = "演示二";
MB_CANCEL_TEXT = "演示三";
var _msg = "<font color=red><b>演示：</b></font><br/>这是自定义的对话框<br/> <font color=green>MB_YES_TEXT  MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT</font>";
MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);
}
</script>
</head>
<body>
<table width="1500" height="1000" border="1" bordercolor="#000000">
<tr>
<td>　</td>
<td align="center"><a href="javascript:test()">普通演示</a></td>
<td>　</td>
</tr>
<tr>
<td> </td>
<td align="center"><a href="javascript:test1()">回调演示一</a>
<label></label></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><a href="javascript:test2()">回调演示二
</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><a href="javascript:test4()">回调演示三</a><a href="javascript:test3()"></a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center"><a href="javascript:test3()">自定义演示
</a></td>
<td> </td>
</tr>
</table>
</body>
</html>
ログイン後にコピー

以上がパーソナライズされた Web ページのポップアップ ウィンドウの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
个性化，网页，小弹窗
ソース：php.cn
前の記事：よく使用される 15 の JavaScript 正規表現 次の記事：JS は通常のルールを使用してユーザー入力と銀行カード番号の形式を制御します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ウィンドウが短すぎると、Flexbox アイテムがコンテナからオーバーフローし、サイドバーが下部の位置合わせを維持できなくなります。 ヘッダー、2x2 コンテンツ グリッド、サイドバーで構成される単純なフレックス レイアウトを使用しようとしています。ウィンドウの幅が一定のサイズより小さい場合、サイドバーは画面の下...
から 2024-03-31 00:03:58
0
1
355
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート