谁有好看点的信息提示框?

cwwhy 2007-03-19 07:20:26

看有些信息提示框,挺好看的。
要仿模态(其他操作不能做)的,背景半透明的。
要js脚本的,不要window.open 弹出的那种阿。

大家做网站应该经常用吧,有没有觉得比较好的,给我发一个阿,要是觉得分不够,如果确实不错可以在加。
...全文
584 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
cat_hsfz 2007-03-20
  • 打赏
  • 举报
回复
用Google搜索"LightBox JS V2",搜索结果第一条就是你要找的,你看看那弹出的框框是否合乎你要求,不错的话就直接改来用吧。
lpc444 2007-03-20
  • 打赏
  • 举报
回复
辛苦了,很好!
hertcloud 2007-03-19
  • 打赏
  • 举报
回复
this.moveStart = function (event, _sId){
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove(){
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
$('dialogBoxShadow').style.left = iLeft + 6;
$('dialogBoxShadow').style.top = iTop + 6;
dragData = {x: oEvent.clientX, y: oEvent.clientY};

}
function mouseup(){
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
oObj.style.left = backData.y;
oObj.style.top = backData.x;
$('dialogBoxShadow').style.left = backData.y + 6;
$('dialogBoxShadow').style.top = backData.x + 6;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}
this.hideModule = function(_sType, _sDisplay){
var aIframe = parent.document.getElementsByTagName("iframe");aIframe=0;
var aType = document.getElementsByTagName(_sType);
var iChildObj, iChildLen;
for (var i = 0; i < aType.length; i++){
aType[i].style.display = _sDisplay;
}
for (var j = 0; j < aIframe.length; j++){
iChildObj = document.frames ? document.frames[j] : aIframe[j].contentWindow;
iChildLen = iChildObj.document.body.getElementsByTagName(_sType).length;
for (var k = 0; k < iChildLen; k++){
iChildObj.document.body.getElementsByTagName(_sType)[k].style.display = _sDisplay;
}
}
}
this.middle = function(_sId){
var sClientWidth = parent ? parent.document.documentElement.clientWidth : document.documentElement.clientWidth;
var sClientHeight = parent ? parent.document.documentElement.clientHeight : document.documentElement.clientHeight;
var sScrollTop = parent ? parent.document.documentElement.scrollTop : document.documentElement.scrollTop;
$(_sId)['style']['display'] = '';
$(_sId)['style']['position'] = "absolute";
$(_sId)['style']['left'] = (document.documentElement.clientWidth / 2) - ($(_sId).offsetWidth / 2);
var sTop = -40 + (sClientHeight / 2 + sScrollTop) - ($(_sId).offsetHeight / 2);
$(_sId)['style']['top'] = sTop > 0 ? sTop : (sClientHeight / 2 + sScrollTop) - ($(_sId).offsetHeight / 2);
}
}

function _error_msg_show(msg, click, icon, title)
{
click = click ? click : ' ';
icon = icon ? icon : '';
title = title ? title : '【系统提示信息】';

switch (icon)
{
case 'forbid':
icon = 1;
break;

case 'succ':
icon = 2;
break;

case 'smile':
icon = 3;
break;

case 'forget':
icon = 4;
break;

case 'sorry':
icon = 5;
break;

case 'care':
icon = 6;
break;

case '':
icon = 5;
break;
}
title = '<span class=MenuWhite>'+title+'</span>';
dg=new dialog();
dg.init();
dg.set('src', icon);
dg.set('title', title);
dg.event(msg, click, icon, click);
}

function _win_error_msg_show(msg, click, icon, top, left, width, height)
{
click = click ? click : ' ';
icon = icon ? icon : '';
title = '【系统提示信息】';
top = top ? top : 40;
switch (icon)
{
case 'forbid':
icon = 1;
break;

case 'succ':
icon = 2;
break;

case 'smile':
icon = 3;
break;

case 'forget':
icon = 4;
break;

case 'sorry':
icon = 5;
break;

case 'care':
icon = 6;
break;

case '':
icon = 5;
break;
}
title = '<span class=MenuWhite>'+title+'</span>';
dg=new dialog();
dg.init();

dg.set('src', icon);

dg.set('title', title);

if (width)
{
dg.set('width', width);
}
if (height)
{
dg.set('height', height);
}

dg.event(msg, click, icon, click);


if (left)
{
document.getElementById('dialogBox')['style']['left'] = left;
document.getElementById('dialogBoxShadow')['style']['left'] = left;
}
if (top)
{
document.getElementById('dialogBox')['style']['top'] = top;
document.getElementById('dialogBoxShadow')['style']['top'] = top;
}

}

function _confirm_msg_show(msg, click_ok, click_no, title)
{
click_ok = click_ok ? click_ok : ' ';
click_no = click_no ? click_no : ' ';
title = title ? title : '【系统提示信息】';

title = '<span class=MenuWhite>'+title+'</span>';
dg=new dialog();
dg.init();
dg.set('src', 6); // smile
dg.set('title', title);
dg.event(msg, click_ok, click_no, click_no);
}

function _win_confirm_msg_show(msg, click_ok, click_no, top, left, width, height)
{
click_ok = click_ok ? click_ok : ' ';
click_no = click_no ? click_no : ' ';
title = '【系统提示信息】';
top = top ? top : 40;
title = '<span class=MenuWhite>'+title+'</span>';

dg=new dialog();
dg.init();
dg.set('src', 6); // smile
dg.set('title', title);

if (width)
{
dg.set('width', width);
}
if (height)
{
dg.set('height', height);
}

dg.event(msg, click_ok, click_no, click_no);

if (left)
{
document.getElementById('dialogBox')['style']['left'] = left;
document.getElementById('dialogBoxShadow')['style']['left'] = left;
}
if (top)
{
document.getElementById('dialogBox')['style']['top'] = top;
document.getElementById('dialogBoxShadow')['style']['top'] = top;
}
}
hertcloud 2007-03-19
  • 打赏
  • 举报
回复

function dialog(){
var titile = '';
var width = 398;
var height = 180;
var src = "";
var path = "images/dialog/";
//var imgPath = '';
var sFunc = '<input id="dialogOk" type="button" value="确 认" class="btn1" onmouseover="this.className=\'btn2\'" onmouseout="this.className=\'btn1\'" onclick="new dialog().reset();" /> <input id="dialogCancel" type="button" value="取 消" class="btn1" onmouseover="this.className=\'btn2\'" onmouseout="this.className=\'btn1\'" onclick="new dialog().reset();" />';
var sClose = '<input type="image" id="dialogBoxClose" onclick="new dialog().reset();" src="' + path + 'dialogClose0.gif" border="0" width="17" height="17" onmouseover="this.src=\'' + path + 'dialogCloseF.gif\';" onmouseout="this.src=\'' + path + 'dialogClose0.gif\';" align="absmiddle" />';
var sBody = '\
<table id="dialogBodyBox" border="0" align="center" cellpadding="0" cellspacing="0">\
<tr height="10"><td colspan="4"></td></tr>\
<tr>\
<td width="10"></td>\
<td width="10" align="center" valign="absmiddle"><img id="dialogBoxFace" border="0" src=""/></td>\
<td id="dialogMsg" style="color:#315100;font-size:14px;font-weight:bold;line-height:125%;"></td>\
<td width="10"></td>\
</tr>\
<tr height="10"><td colspan="4" align="center"></td></tr>\
<tr><td id="dialogFunc" colspan="4" align="center">' + sFunc + '</td></tr>\
<tr height="10"><td colspan="4" align="center"></td></tr>\
</table>\
';
var sBox = '\
<table id="dialogBox" width="' + width + '" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #000;display:none;z-index:10;">\
<tr height="26">\
<td style="background:url(images/dialog/tit_dialog.gif)">\
<table onselectstart="return false;" style="-moz-user-select:none;" width="100%" border="0" cellpadding="0" cellspacing="0">\
<tr>\
<td width="6"></td>\
<td id="dialogBoxTitle" onmousedown="new dialog().moveStart(event, \'dialogBox\')" style="color:#2B4801;cursor:move;font-size:12px;font-weight:bold;text-align:left;"> </td>\
<td id="dialogClose" width="27" align="right" valign="middle">\
' + sClose + '\
</td>\
<td width="6"></td>\
</tr>\
</table>\
</td>\
</tr>\
<tr id="dialogHeight" style="height:' + height + '">\
<td id="dialogBody" style="background:url(images/dialog/bg_dialog.gif) left top repeat-x #FFF;">' + sBody + '</td>\
</tr>\
</table>\
<div id="dialogBoxShadow" style="display:none;z-index:9;"></div>\
';
var sBG = '\
<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(images/blank.gif);"></div>\
';
function $(_sId){return document.getElementById(_sId)}
this.show = function(){
this.middle('dialogBox');
this.shadow();
//$("dialogBoxBG").style.width = document.body.scrollWidth;
//$("dialogBoxBG").style.height = document.body.scrollHeight;
}
this.reset = function(){$('dialogBox').style.display='none';$('dialogBoxBG').style.display='none';$('dialogBoxShadow').style.display = "none";$('dialogBody').innerHTML = sBody;}
this.html = function(_sHtml){$("dialogBody").innerHTML = _sHtml;this.show();}
this.init = function(){
$('dialogCase') ? $('dialogCase').parentNode.removeChild($('dialogCase')) : function(){};
var oDiv = document.createElement('span');
oDiv.id = "dialogCase";
oDiv.innerHTML = sBG + sBox;
document.body.appendChild(oDiv);
$('dialogBoxBG').style.height = document.body.scrollHeight;
}
this.button = function(_sId, _sFuc){
if($(_sId)){
$(_sId).style.display = '';
if($(_sId).addEventListener){
if($(_sId).act){$(_sId).removeEventListener('click', function(){eval($(_sId).act)}, false);}
$(_sId).act = _sFuc;
$(_sId).addEventListener('click', function(){eval(_sFuc)}, false);
}else{
if($(_sId).act){$(_sId).detachEvent('onclick', function(){eval($(_sId).act)});}
$(_sId).act = _sFuc;
$(_sId).attachEvent('onclick', function(){eval(_sFuc)});
}
}
}
this.shadow = function(){
var oShadow = $('dialogBoxShadow');
var oDialog = $('dialogBox');
oShadow['style']['position'] = "absolute";
oShadow['style']['background'] = "#000";
oShadow['style']['display'] = "";
oShadow['style']['opacity'] = "0.2";
oShadow['style']['filter'] = "alpha(opacity=20)";
oShadow['style']['top'] = oDialog.offsetTop + 6;
oShadow['style']['left'] = oDialog.offsetLeft + 6;
oShadow['style']['width'] = oDialog.offsetWidth;
oShadow['style']['height'] = oDialog.offsetHeight;
}
this.open = function(_sUrl, _sMode){
this.show();
if(!_sMode || _sMode == "no" || _sMode == "yes"){
$("dialogBody").innerHTML = "<iframe width='100%' height='100%' src='" + _sUrl + "' frameborder='0' scrolling='" + _sMode + "'></iframe>";
}
}
this.showWindow = function(_sUrl, _iWidth, _iHeight, _sMode, _sTitle){
var oWindow;
var sLeft = (screen.width) ? (screen.width - _iWidth)/2 : 0;
var iTop = -40 + (document.documentElement.scrollTop + document.documentElement.clientHeight - _iHeight)/2;
iTop = iTop > 0 ? iTop : (document.documentElement.scrollTop + document.documentElement.clientHeight - _iHeight)/2;
var sTop = (document.documentElement.scrollTop + document.documentElement.clientHeight) ? iTop : 0;
if(window.showModalDialog && _sMode == "m"){
oWindow = window.showModalDialog(_sUrl,_sTitle,"dialogWidth:" + _iWidth + "px;dialogheight:" + _iHeight + "px");
} else {
oWindow = window.open(_sUrl, _sTitle, 'height=' + _iHeight + ', width=' + _iWidth + ', top=' + sTop + ', left=' + sLeft + ', toolbar=no, menubar=no, scrollbars=' + _sMode + ', resizable=no,location=no, status=no');
this.reset();
}
}
this.event = function(_sMsg, _sOk, _sCancel, _sClose){
$('dialogFunc').innerHTML = sFunc;
$('dialogClose').innerHTML = sClose;
$('dialogBodyBox') == null ? $('dialogBody').innerHTML = sBody : function(){};

$('dialogMsg') ? $('dialogMsg').innerHTML = _sMsg : function(){};
_sOk && _sOk != "" ? this.button('dialogOk', _sOk) : $('dialogOk').style.display = 'none';
_sCancel && _sCancel != "5" ? this.button('dialogCancel', _sCancel) : $('dialogCancel').style.display = 'none';
////_sOk ? this.button('dialogOk', _sOk) : _sOk == "" ? function(){} : $('dialogCancel').style.display = 'none';
////_sCancel ? this.button('dialogCancel', _sCancel) : _sCancel == "" ? function(){} : $('dialogCancel').style.display = 'none';
_sClose ? this.button('dialogBoxClose', _sClose) : function(){};
this.show();
}
this.set = function(_oAttr, _sVal){
var oShadow = $('dialogBoxShadow');
var oDialog = $('dialogBox');
var oHeight = $('dialogHeight');

if(_sVal != ''){
switch(_oAttr){
case 'title':
$('dialogBoxTitle').innerHTML = _sVal;
title = _sVal;
break;
case 'width':
oDialog['style']['width'] = _sVal;
width = _sVal;
break;
case 'height':
oHeight['style']['height'] = _sVal;
height = _sVal;
break;
case 'src':
if(parseInt(_sVal) > 0){
$('dialogBoxFace') ? $('dialogBoxFace').src = path + _sVal + '.gif' : function(){};
}else{
$('dialogBoxFace') ? $('dialogBoxFace').src = _sVal : function(){};
}
src = _sVal;
break;
}
}
this.middle('dialogBox');
oShadow['style']['top'] = oDialog.offsetTop + 6;
oShadow['style']['left'] = oDialog.offsetLeft + 6;
oShadow['style']['width'] = oDialog.offsetWidth;
oShadow['style']['height'] = oDialog.offsetHeight;
}
marysxj 2007-03-19
  • 打赏
  • 举报
回复
楼上的贴了好长啊,先收藏!
顺便帮顶,也需要这方面的。
cwwhy 2007-03-19
  • 打赏
  • 举报
回复
我找到一个网上的,不怎么好。

<BODY>
<form action="#">
<input name=btn1 type=button value=有自定义按钮 onclick=showalert1();>
<input name=btn2 type=button value=无自定义按钮 onclick=showalert2();>
</form>
<script language="javascript">
<!--
function gourl(e){
switch(e){
case 1:
window.alert("点击了确定按钮.");
break;
case 2:
break;
case 3:
window.alert("点击了其它按钮.");
break;
default:
break;
}
}

function showalert1(){
var Br = new innerMessageBox();
Br.ShowModal("示例", "您确定要删除该项吗?", 320, 120, "gourl($)", "重试");
}

function showalert2(){
var Br = new innerMessageBox();
Br.ShowModal("示例", "您确定要删除该项吗?", 320, 120, "gourl($)");
}
//-->
</script>
<script>
<!--
function innerMessageBox(){
var BackObject, FormObject;

// 检查页面中是否存在该控件.
function checkIMBObject(){
if (document.getElementById("imb_Background")==null){
document.body.innerHTML += "<iframe id=\"imb_Background\" src=\"about:blank\" style=\"position:absolute;left:0;top:0;width:0px;height:0px;visibility:hidden;\" frameborder=\"0\"></iframe>";
window.imb_Background.document.open();
window.imb_Background.document.write("<html><body bgcolor=red> sdfasdfasdf</body></html>");
window.imb_Background.document.close();
}
if (document.getElementById("imb_FormModal")==null){
document.body.innerHTML += "<iframe id=\"imb_FormModal\" src=\"about:blank\" style=\"position:absolute;left:0;top:0;width:0px;height:0px;visibility:hidden;border-bottom:3px solid #999999;border-right:3px solid #999999;border-top:1px solid #F8F6C1;border-left:1px solid #F8F6C1;\" frameborder=\"0\"></iframe>";
window.imb_FormModal.document.open();
window.imb_FormModal.document.write("<html><head><style><!--");
window.imb_FormModal.document.write("td{font-size:12px;");
window.imb_FormModal.document.write("//--></style></head><body scroll=no leftmargin=0 topmargin=0>");
window.imb_FormModal.document.write("<table width=100% height=100% bgcolor=\"#F6F8DF\"><tr><td align=left bgcolor=#EDE808><div id=\"imb_Title\" style=\"padding-left:3px;padding-right:3px;\">");
window.imb_FormModal.document.write("</div></td></tr><tr><td align=left><div id=\"imb_Content\" style=\"padding:7px;\">");
window.imb_FormModal.document.write("</div></td></tr><tr><td id=\"imb_Body\" align=center>");
window.imb_FormModal.document.write("</td></tr></table>");
window.imb_FormModal.document.write("</body></html>");
window.imb_FormModal.document.close();
}
}

// 显示对话框控件.
this.ShowModal = function(iCaption, iMessage, iWidth, iHeight, iClickFunc, iOther){
var smWidth = 420, smHeight = 180, smCaption = "默认对话框", smMessage="您确定执行这项操作吗?", smFunc, smObject, smAlpha, smInterval;
if (arguments.length > 4 ){
smWidth = iWidth;
smHeight = iHeight;
smCaption = iCaption;
smMessage = iMessage;
smFunc = iClickFunc;
}
// 背景的渐显.
function checkIMBAlpha(){
smObject.style.filter = "alpha(opacity="+smAlpha+");";
smAlpha += 10;
if (smAlpha>80){
clearInterval(smInterval);
}
}
checkIMBObject();
this.BackObject = document.getElementById("imb_Background");
this.FormObject = document.getElementById("imb_FormModal");
smObject = this.BackObject;
smAlpha = 0;
this.BackObject.style.left = 0;
this.BackObject.style.top = 0;
this.BackObject.style.width = document.body.scrollWidth;
this.BackObject.style.height = document.body.scrollHeight;
this.BackObject.style.visibility = "visible";
smInterval = window.setInterval(checkIMBAlpha, 5);

this.FormObject.style.left = document.body.clientWidth/2 - smWidth/2;
this.FormObject.style.top = document.body.clientHeight/2 - smHeight/2;
this.FormObject.style.width = smWidth;
this.FormObject.style.height = smHeight;
this.FormObject.style.visibility = "visible";
window.imb_FormModal.document.getElementById("imb_Title").innerHTML = "<b>" + smCaption + "</b>" + " -- 操作提示";
window.imb_FormModal.document.getElementById("imb_Content").innerHTML = smMessage;
if (iOther==null || iOther==""){
window.imb_FormModal.document.getElementById("imb_Body").innerHTML = "<input type=submit id=imb_Ok name=imb_Ok value=\"确定\" shortKey=\"T\">   <input type=button id=imb_Cancel name=imb_Cancel value=\"取消\" shortKey=\"C\">";
}else{
window.imb_FormModal.document.getElementById("imb_Body").innerHTML = "<input type=button id=imb_Other name=imb_Other value="+iOther+" shortKey=\"O\">   <input type=submit id=imb_Ok name=imb_Ok value=\"确定\" shortKey=\"T\">   <input type=button id=imb_Cancel name=imb_Cancel value=\"取消\" shortKey=\"C\">";
}
document.body.disabled = true;
window.imb_FormModal.document.getElementById("imb_Ok").onclick= function(){
parent.document.body.disabled = false;
if (smFunc!=null && smFunc!=""){
eval("parent." + smFunc.replace("$","1"));
}
parent.document.getElementById("imb_Background").style.visibility = "hidden";
parent.document.getElementById("imb_FormModal").style.visibility = "hidden";
}
window.imb_FormModal.document.getElementById("imb_Cancel").onclick= function(){
if (smFunc!=null && smFunc!=""){
eval("parent." + smFunc.replace("$","2"));
}
parent.document.body.disabled = false;
parent.document.getElementById("imb_Background").style.visibility = "hidden";
parent.document.getElementById("imb_FormModal").style.visibility = "hidden";
}
window.imb_FormModal.document.getElementById("imb_Other").onclick= function(){
if (smFunc!=null && smFunc!=""){
eval("parent." + smFunc.replace("$","3"));
}
parent.document.body.disabled = false;
parent.document.getElementById("imb_Background").style.visibility = "hidden";
parent.document.getElementById("imb_FormModal").style.visibility = "hidden";
}
}
}
//-->
</script>
</BODY>

62,046

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧