仿Alert的JavaScript成效-JavaSript-爱易网页

仿Alert的JavaScript成效

日期：2014-05-16　浏览次数：20332 次

仿Alert的JavaScript效果
仿Alert的JavaScript效果

有时页面需要提示的，如果直接用JS的alert来提示会和页面风格不一致，而且比较重要的是会有
很不爽的WINDOWS的提示音。

所以我们可以用JS来仿这个提示，改变成为自己的效果：

在要使用这个页面的地方导入一个alert.js文件，

在要调用这个效果的页面加入如下JS
<script src="script/alert.js" type="text/javascript"></script>

<script type="text/javascript" defer>

</script>
其中的init是需要在页面载入的时候就去初始化的，而且这个初始化的动作，由于调用了
document.createElement('span');
document.body.appendChild(oDiv);
所以必须要在<body></body>标签里面的内容都装载完毕的时候再调用才行，不然IE就会报错
“Internet Explorer无法打开Internet站点。。。。。”
“已终止操作”
所以一定要在这个JS的后面加上defer，也就是JS在页面全加载后才加载执行
要提示的地方把
alert("test");替换成为---》
new dialog().event("test");

alert.js的内容：

function setCopy(_sTxt){try{clipboardData.setData('Text',_sTxt)}catch(e){}}

function dialog(){
var titile = '';
var width = 300;
var height = 100;
var src = "";
var path = "";
var sFunc = '<input id="dialogOk" type="button" style="width:62px;height:22px;border:0;line-height:20px;" value="确认" onclick="new dialog().reset();" /> <input id="dialogCancel" type="button" style="width:62px;height:22px;border:0;line-height:20px;" value="取消" onclick="new dialog().reset();" />';
var sClose = '<input type="image" id="dialogBoxClose" onclick="new dialog().reset();" src="../images/help/dialogClose.gif" border="0" width="17" height="17" onmouseover="this.src=\'../images/help/dialogClose.gif\';" onmouseout="this.src=\'../images/help/dialogClose.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 id="dialogMsg" style="font-size:12px;color:#000;"></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="1" bgcolor="#D6E3EB"><td></td></tr>\
    <tr height="25" bgcolor="#6795B4">\
     <td>\
      <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:#fff;cursor:move;font-size:12px;font-weight:bold;"> </td>\
        <td id="dialogClose" width="27" align="right" valign="middle">\
         ' + sClose + '\
        </td>\
        <td width="6"></td>\
       </tr>\
      </table>\
     </td>\
&nb

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

仿Alert的JavaScript成效

相关资料更多>

推荐阅读更多>