js提示框替代系统alert,自动关闭alert对话框的实现(2)

$(function () { $(".show_close_button").click(function () { $(".show_alert_box").css("display", "none"); }); $(".show_cancel_button").click(function () { $(".show_alert_box").css("display", "none"); }); }) /* * 显示提示对话框 * title 标题 * content 提示内容 * isShowAlertButton 是否显示操作按钮 仅用于错误提示 * url 多按钮时 主按钮跳转url * urltext主按钮内容提示西信息 * isTimer是否自动关闭对话框,仅用于错误提示时 * * 页面布局 在页面中添加如下代码 * <div> <div> <h1>恭喜您</h1> <h2></h2> <div> <div>知道了</div> <div>领取奖励</div> <div>取消</div> </div> </div> </div> * */ function showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt){ $(".show_alert_div h1").html(title); $(".show_alert_div h2").html(content); // 隐藏标题 if(isShowTitle!=null&&isShowTitle==false){ $(".show_alert_div h1").css("display", "none"); } if(url==null || url==""){ //显示单条 $(".alert_button_div").css("display", "none"); $(".show_close_button").css("display", "block"); // 隐藏底部按钮 if(isShowAlertButton!=null&&isShowAlertButton==false){ $(".show_alert_button_box").css("display", "none"); $(".show_alert_div h2").addClass("alert_message_font"); } // 定时自动关闭 if(isTimer!=null&&isTimer==true){ setTimeout("timerCloseAlertBox()",2000); } }else{ //显示多条 $(".show_alert_div h2").css("display", "block"); $(".viewaward").attr('href',url); $(".viewawardbtn").html(urltxt); /*注释于2016-07-08 屏蔽底部取消领奖等按钮 */ $(".alert_button_div").css("display", "block"); $(".show_close_button").css("display", "none"); /* $(".alert_button_div").css("display", "none"); $(".show_close_button").css("display", "block") */ } $('.show_alert_box').css("display", "block"); } /* * 弹出简单信息提示 * 页面布局 在页面中添加如下代码 * <div> <div> <h3></h3> </div> </div> */ function showAlertMessage(message){ // 显示提示框 $('.show_alert_box').css("display", "block"); // 填充信息提示 $(".show_alert_div h3").html(message); // 自动关闭 setTimeout("timerCloseAlertBox()",2000); } // 定时关闭提示框 function timerCloseAlertBox(){ $('.show_alert_box').css("display", "none"); }

 使用示例

首先引用js文件，前提必须应用jquery.基础js文件

然后引入样式文件

在页面任务位置添加一些div层

<div> <div> <h1>恭喜您</h1> <h2></h2> <div> <div>知道了</div> <div>领取奖励</div> <div>取消</div> </div> </div> </div>

在js中调用

参数分别是 标题 ，提示内容，是否显示标题，是否显示操作按钮，是否启用自动关闭，要跳转的url 点击要跳转的按钮描述文件信息

showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者 showAlertMessage(message)

以上这篇js提示框替代系统alert,自动关闭alert对话框的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: