关于用DIV模拟Confirm确认窗口的问题

三木哥 三木哥 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
我用DIV做了一个确认窗口,用来替代Confirm,DIV有"确认"和"取消"两个按钮,
现在我想点击“确认”按钮的时候,使整个DIV窗口返回true, 也就是说要达到Confirm窗口的那种效果。

我把代码帖出来吧:
以下是Common.js文件的内容:

首先定义了两个DIV
document.write(" <div id='divMessageBoxBody' class='MessageBoxBody'> </div>");
document.write(" <div id='divMessageBoxBG' class='MessageBoxBG'> </div>");

//这是ConfirmBox函数的详细代码
function ConfirmBox(message)
{
var msgBox = document.getElementById("divMessageBoxBody");
var background = document.getElementById("divMessageBoxBG");
msgBox.style.display="block";
background.style.display="block";
var str="";
str+=" <table> <tr> <td class='ConfirmBoxIcon'> </td> <td>";
str+=" <table> <tr style=\"height:70px;\"> <td>"+message+" </td> </tr>";
str+=" <tr style='height:20px;'> <td style='text-align:right;'>";
str+=" <input type='button' id="ButtonYes" value='Yes' onclick='Hide();'/> ";
str+=" <input type='button' id="ButtonNo" value='No' onclick='Hide();'/>";
str+=" </td> </tr> </table> </td> </tr> </table>";
msgBox.innerHTML=str;
}

//隐藏DIV
function Hide()
{
document.getElementById("divMessageBoxBody").style.display="none";
document.getElementById("divMessageBoxBG").style.display="none";
}

以下是DIV的样式:
/*弹出窗口的背景样式*/
.MessageBoxBG
{
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: white;
z-index:1001;
-moz-opacity: 0.80;
opacity:.80;
filter: alpha(opacity=80);
}

/*弹出窗口的样式*/
.MessageBoxBody
{
display: none;
position: absolute;
background-color:#FFF;
border:solid 1px #B6BCCC;
font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align:center;
top:50%;
left:50%;
height:135px;
width:300px;
margin:-60px 0 0 -150px;
padding: 0px;
z-index:1002;
overflow: auto;
}

现在最关键的就是点击ButtonYes时如何使整个DIV窗体返回true.
因为我在页面中是这样调用该函数的:
if(ConfirmBox('是否确认删除?'))
{
return true;
}
else
{
return false;
}
使用方法跟Confirm是一样的.


...全文

相关推荐

js弹出div层模拟alert(可以在iframe中使用)

自己改写的js弹出div层模拟alert 可以自定义样式 在iframe框架中使用 避免了覆盖层只覆盖子页面的问题

qq346127416

JQuery DIV 实现window.confirm美化确认提示框

JQuery DIV 实现window.confirm美化确认提示框

fendouhuazi

vue写的confirm确认框,loading加载中,message提示消息

vue写的confirm确认框,loading加载中,message提示消息 在vue的模板里引用 import message from './tips/message/index'; import confirm from './tips/confirm/index'; import loading from './tips/loading/index'; 使用comfirm需要在template中这样定义 {{inportExcelMsg}} 确定 使用message可以这样定义 //显示提示信息 showMessage:function(msg){ message.installMessage({ message: msg, time: 3000 }); } 使用loading可以在指定的div上这样定义: v-kiko-loading="loading" 使用loading变量来控制显示和隐藏

火柴有猿

jQuery自定义简单清爽的confirm确认对话框效果

jQuery自定义简单清爽的confirm确认对话框效果

希伟

RabbitMQ消息模式之Confirm确认消息

理解Confirm消息确认机制 消息的确认,是指生产者投递消息后,如果Broker收到消息,则会给我们生产者一个应答。生产者进行接收应答,用来确定这条消息是否正常的发送到Broker,这种方式也是消息的可靠性投递的核心保障 消费端代码: package com.ue.confirm; import com.rabbitmq.client.Channel; import com.rabbitmq.client.Connection; import com.rabbitmq.client.ConnectionFactory; import com.rabbitmq.client.Queuein

weixin_38698403
评论 13
收藏 已收藏
分享
返回顶部
三木哥
JavaScript 87,983 成员 224,681 内容