Confirm()方法用于显示一个带有指定消息和OK及取消按钮的对话框。
如果用户点击“确定”按钮，则confirm()方法返回true；如果点击“取消”按钮，则confirm()返回false。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
<BODY>
<a href="htllo.jsp?id=<%=rs("id")%>" onclick="return confirm('确定将此记录删除?')">删除</a>
</BODY>
这样就可以做到，点击“是”，删除；点击“否”，返回。
希望可以帮到你。
1、加入语音提示<audio id="sound" autoplay="autoplay">
动态加入播放语音文件代码：
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav"
2、动态弹出消息提示框：
在此处我导入了jquery.gritter.js和jquery.gritter.css,具体实现代码：
jQuery(document).ready(function() {
setInterval(function(){
$.post('ajax/linecheck',function(data){
var json=eval("("+data+")")
$.each(json,function(index,item){
$("#line"+item.id).html("")
$.each(item.localList,function(index,item2){
if(item2.attendOCList!=""){
$("#line"+item.id).append("<li class='in' id='in"+item2.id+"'><div class='avatar'>"
+item2.location+"</div><div class='message'><ul id=li"+item2.id+"></ul></div></li>")
}
$.each(item2.attendOCList,function(index,item3){
if(item3.status==0){
$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name
+"</span><br><span style='color:red' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>")
}else{
$("#li"+item2.id).append("<li class='user'><span class='username'>"
+item3.person_name+"</span><br><span style='color:red' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>")
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav"
setTimeout(function () {
var unique_id = $.gritter.add({
title: item3.person_name+"("+item2.location+")",
text:"<span class='username'>"+item3.person_name
+"</span><br><span style='color:red' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"+item3.card_id+"</span>",
sticky: true,
time: '',
class_name: 'my-sticky-class'
})
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
})
}, 12000)
}, 2000)
}
})
})
同时其他后续操作需要在js中继续填写。因此简单用div写了一个alert提示框，并自动关闭。效果图
css样式
/*弹出消息对话框样式*/
.show_alert_box{
width:100%
height:100%
position:fixed
top:0px
left:0px
background-color:rgba(0,0,0,0.6)
display:none
z-index:200
}
.show_alert_div{
width:70%
position:absolute
top:50%
left:15%
margin-top:-80px
background-color:#fff
-webkit-border-radius: 10px
-moz-border-radius: 10px
border-radius: 10px
border:1px solid #797979
overflow:hidden
box-sizing:border-box
}
.show_alert_div h1{
width:100%
float:left
font-size:20px
color:#353535
text-align:center
line-height:26px
margin-top:20px
}
.show_alert_div h2{
width:100%
float:left
font-size:16px
color:#353535
text-align:center
line-height:20px
margin:20px 0px 70px 0px
box-sizing:border-box
padding:0px 15px
}
.show_alert_div h3{
width:100%
float:left
font-size:16px
color:#353535
text-align:center
line-height:20px
margin:25px 0px 20px 0px
box-sizing:border-box
padding:0px 15px
}
/*仅显示消息时 showInformation方法填充提示西信息
*/
.alert_message_font{
width:100%
float:left
font-size:16px
color:#353535
text-align:center
line-height:20px
margin:25px 0px 20px 0px !important
box-sizing:border-box
padding:0px 15px
}
.show_alert_div .show_alert_button_box{
width:100%
height:40px
position:absolute
bottom:0px
left:0px
border-top:1px solid #ccc
}
.show_alert_div .show_alert_button_box .alert_button_div{
width:50%
height:40px
float:left
font-size:18px
line-height:40px
text-align:center
color:#353535
box-sizing:border-box
border-right:1px solid #ccc
}
.show_alert_div .show_alert_button_box .show_close_button{
width:100%
height:40px
float:left
font-size:18px
line-height:40px
text-align:center
color:#353535
box-sizing:border-box
border-right:1px solid #ccc
}
.show_cancel_button{
width:50%
border-right:0
}
/*输入对话框样式*/
.show_alert_box_input{
width:100%
position:fixed
top:0px
left:0px
background-color:rgba(0,0,0,0.6)
display:none
z-index:200
}
.show_alert_div_input{
width:90%
position:absolute
top:50%
left:5%
margin-top:-80px
background-color:#fff
-webkit-border-radius: 10px
-moz-border-radius: 10px
border-radius: 10px
border:1px solid #797979
overflow:hidden
box-sizing:border-box
}
.show_alert_div_input h1{
width:100%
float:left
font-size:20px
color:#353535
text-align:center
line-height:26px
margin-top:20px
}
.show_alert_div_input h2{
width:100%
float:left
font-size:14px
color:#353535
text-align:center
line-height:20px
margin:25px 0px 70px 0px
box-sizing:border-box
padding:0px 15px
}
.show_alert_div_input .show_alert_button_box_input{
width:100%
height:40px
position:absolute
bottom:0px
left:0px
border-top:1px solid #ccc
}
.show_alert_div_input .show_alert_button_box_input .alert_button_div_input{
width:50%
height:40px
float:left
font-size:18px
line-height:40px
text-align:center
color:#353535
box-sizing:border-box
border-right:1px solid #ccc
}
.show_alert_div_input .show_alert_button_box_input .show_close_button_input{
width:100%
height:40px
float:left
font-size:18px
line-height:40px
text-align:center
color:#353535
box-sizing:border-box
border-right:1px solid #ccc
}
/*如何领奖提示框样式*/
.show_alert_box_how_button{
width:100%
position:fixed
top:0px
left:0px
background-color:rgba(0,0,0,0.6)
display:none
z-index:200
}
.show_alert_div_how_button{
width:90%
position:absolute
top:50%
left:5%
margin-top:-80px
background-color:#fff
-webkit-border-radius: 10px
-moz-border-radius: 10px
border-radius: 10px
border:1px solid #797979
overflow:hidden
box-sizing:border-box
}
.show_alert_div_how_button h1{
width:100%
float:left
font-size:20px
color:#353535
text-align:center
line-height:26px
margin-top:20px
}
.show_alert_div_how_button h2{
width:100%
float:left
font-size:14px
color:#353535
text-align:center
line-height:20px
margin:25px 0px 70px 0px
box-sizing:border-box
padding:0px 15px
}
.show_alert_div_how_button .show_alert_button_box_how_button{
width:100%
height:40px
position:absolute
bottom:0px
left:0px
border-top:1px solid #ccc
}
.show_alert_div_how_button .show_alert_button_box_how_button .alert_button_div_how_button{
width:50%
height:40px
float:left
font-size:18px
line-height:40px
text-align:center
color:#353535
box-sizing:border-box
border-right:1px solid #ccc
}
.show_alert_div_how_button .show_alert_button_box_how_button .show_close_button_how_button{
width:100%
height:40px
float:left
font-size:18px
line-height:40px
text-align:center
color:#353535
box-sizing:border-box
border-right:1px solid #ccc
}
js 代码
$(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 class="show_alert_box">
<div class="show_alert_div">
<h1>恭喜您</h1>
<h2></h2>
<div class="show_alert_button_box">
<div class="show_close_button">知道了</div>
<div onclick="requestLotteryPrize()" class="alert_button_div viewawardbtn">领取奖励</div>
<div class="alert_button_div show_cancel_button">取消</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 class="show_alert_box">
<div class="show_alert_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 class="show_alert_box">
<div class="show_alert_div">
<h1>恭喜您</h1>
<h2></h2>
<div class="show_alert_button_box">
<div class="show_close_button">知道了</div>
<div onclick="requestLotteryPrize()" class="alert_button_div viewawardbtn">领取奖励</div>
<div class="alert_button_div show_cancel_button">取消</div>
</div>
</div>
</div>
在js中调用
参数分别是 标题 ，提示内容，是否显示标题，是否显示操作按钮，是否启用自动关闭，要跳转的url 点击要跳转的按钮描述文件信息
showInformation(title, content,isShowTitle,isShowAlertButton,isTimer,url, urltxt)方法或者
