<html> <style mce_bogus="1">table.messagebox {FONT: bold 11px tahoma,arial,verdana,sans-serif; BORDER-LEFT: 0px; color: #000000; background-color: #CDDEF3; border-left: 1px solid #99BBE8; border-bottom: 1px solid #99BBE8; border-right: 1px solid #99BBE8;margin-top: 15px; margin-bottom: 15px} table.messagebox tr.header {background: url(top-bottom.gif); width:100%;} table.messagebox tr.header td{ COLOR: #15428b; height: 25px; border-bottom: 0px solid #99BBE8;padding-left:5px;} table.messagebox tr.body {font:normal;color: #2D3338; padding: 10px 20px} table.messagebox td.footer {padding-bottom:5px;} input.button {FONT: normal 12px tahoma,arial,verdana,sans-serif; BORDER-RIGHT: #99BBE8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #99BBE8 1px solid; PADDING-LEFT: 2px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #99BBE8 1px solid; CURSOR: hand; PADDING-TOP: 2px; BORDER-BOTTOM: #99BBE8 1px solid}</style> <mce:script type="text/javascript"><!-- var mpx = 0; var mpy = 0; var obj=0; var MB_OK = 1; var MB_YESNO = 2; var callback = null; var msg_htm = '<div id="msgMask" style="position:absolute;left:0px;top:0px;z-index:99;background-color:#333333;width:100%;height:100%;-moz-opacity:0.5;filter: alpha(opacity=10);display:none;overflow:hidden;"></div>'; msg_htm+= '<div id="msgbox" style="position:absolute;visibility:hidden;z-index:100;overflow:hidden;" mce_style="position:absolute;visibility:hidden;z-index:100;overflow:hidden;">'; msg_htm+=' <table class="messagebox" align="center" cellpadding="0" cellspacing="0">'; msg_htm+=' <tr class="header" onmousedown="finddiv(event,msgbox)" style="cursor:move;" mce_style="cursor:move;">'; msg_htm+=' <td id="title" name="title" align="left">确认</td>'; msg_htm+=' <td align="right"><img id="close" src="close.gif" mce_src="close.gif" border="0" style="cursor: hand;margin-right:5px;" mce_style="cursor: hand;margin-right:5px;" onmouseout="obj=0;" onclick="msgmethod(false)"></td>'; msg_htm+=' </tr>'; msg_htm+=' <tr class="body">'; msg_htm+=' <td style="padding:5px 0px 10px 15px;" mce_style="padding:5px 0px 10px 15px;"><img src="info.gif" mce_src="info.gif" border="0"></td>'; msg_htm+=' <td id="content" name="content" style="padding-top:0px;" mce_style="padding-top:0px;">确定要删除该信息吗？</td>'; msg_htm+=' </tr>'; msg_htm+=' <tr>'; msg_htm+=' <td colspan=2 class="footer" align="center">'; msg_htm+=' <input class="button" id="yes" onclick="msgmethod(true)" value="确定" type="button" style="padding:2 10 0 10" mce_style="padding:2 10 0 10">'; msg_htm+=' <input class="button" id="no" onclick="msgmethod(false)" value="取消" type="button" style="padding:2 10 0 10" mce_style="padding:2 10 0 10">'; msg_htm+=' </td>'; msg_htm+=' </tr>'; msg_htm+=' </table></div>'; document.write(msg_htm); function msgmethod(obj){ document.getElementById("msgbox").style.visibility="hidden"; document.getElementById("msgMask").style.display = "none"; if(callback!=null) callback(obj); } function MessageBox(msg, action, fun){ callback = fun; var msgobj = document.getElementById("msgbox"); var msgMask = document.getElementById("msgMask"); var _html = ""; msgMask.style.display = ""; msgobj.style.visibility = "visible"; msgobj.style.left = ( document.body.clientWidth - msgobj.offsetWidth ) / 2 + "px"; msgobj.style.top = ( document.body.clientHeight - msgobj.offsetHeight ) / 2 + "px"; msgMask.style.width = document.body.scrollWidth; msgMask.style.height = document.body.scrollHeight; msgobj.getElementsByTagName("table")[0].rows[1].cells[1].innerHTML = msg; if(action==1){ callback = null; _html = '<input class="button" id="close" onclick="msgmethod(false)" value="确定" type="button" style="padding:2 10 0 10" mce_style="padding:2 10 0 10">' msgobj.getElementsByTagName("table")[0].rows[2].cells[0].innerHTML = _html; }else{ _html = '<input class="button" id="yes" onclick="msgmethod(true)" value="确定" type="button" style="padding:2 10 0 10" mce_style="padding:2 10 0 10">'; _html+= '<input class="button" id="no" onclick="msgmethod(false)" value="取消" type="button" style="padding:2 10 0 10" mce_style="padding:2 10 0 10">'; msgobj.getElementsByTagName("table")[0].rows[2].cells[0].innerHTML = _html; } } function _test(){ MessageBox("请选择要删除的内容", MB_YESNO, function(obj){ if(obj) alert("你点击了确定"); else alert("你点击了取消"); }); } function finddiv(ev,mdiv){ obj = mdiv; x = ev.clientX-parseInt(obj.style.left); y = ev.clientY-parseInt(obj.style.top); } function movediv(ev){ if(obj == 0){ return false; }else{ ev = ev||window.event; var mousePos = mouseCoords(ev); mpx = mousePos.x - x; mpy = mousePos.y - y; if(mpx < 0 || mpy < -15 || obj.offsetWidth+mpx > document.body.clientWidth || obj.offsetHeight+mpy > document.body.clientHeight)return ; obj.style.left = mpx+"px"; obj.style.top = mpy+"px"; } } function mouseCoords(ev){ if(ev.pageX||ev.pageY){return {x:ev.pageX, y:ev.pageY};} return {x:ev.clientX + document.documentElement.scrollLeft,y:ev.clientY + document.documentElement.scrollTop} } document.onmousemove = new Function("movediv(event)"); document.onmouseup = function(){obj=0;}; // --></mce:script> <body> <input onclick="_test()" value="test" type="button"> </body> </html>
本文介绍了一种使用HTML和JavaScript自定义实现的消息框功能。该消息框具备基本的交互功能，如确认、取消按钮，并可通过回调函数处理用户的操作。此外，还实现了消息框的拖动功能，提升了用户体验。
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
