弹出提示框一般有3种
1)alert (普通提示框)
2)prompt (可输入的提示框)
3)confirm (可选择的提示框)
下面举个例子:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mal()">第一种:alert</button>
<button onclick="mpro()">第二种:prompt</button>
<button onclick="mcon()">第三种:confirm</button>
<script>
function mal(){
alert('这是一个普通的提示框')
}
function mpro(){
var val = prompt('这是一个可输入的提示框','这个参数为输入框默认值,可以不填哦')
//prompt会把输入框的值返回给你
}
function mcon(){
var boo = confirm('这是一个可选择的提示框,3种提示方式,学会了吗?')
//confirm 会返回你选择的选项,然后可以依据选择执行逻辑
if(boo){
alert('学会了,真聪明')
}else{
alert('再来一遍吧')
}
}
</script>
</body>
</html>
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)
}
})
})
思路：
如果要输入多个信息，那么原生的提示框肯定不符合要求，需要自己定义。
一般都是使用div层模拟提示框，这样就可以随便布局了。
代码示例：
1、定义CSS<style type="text/css">
body {
height: 100%
overflow: auto
margin: 0
}
#test_Div {
position: fixed
_position: absolute
top: 50%
left: 50%
border: 2px solid #C0C0C0/*弹出框边框样式*/
background-color: #FFFFFF/*弹出框背景色*/
display:none
}
* html {
overflow: hidden
position: absolute
}
</style> 2、简单点，引入JQuery
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script> 3、弹出层
function show_Win(div_Win, tr_Title, event) {
var s_Width = document.documentElement.scrollWidth //滚动 宽度
var s_Height = document.documentElement.scrollHeight //滚动 高度
var js_Title = $(document.getElementById(tr_Title)) //标题
js_Title.css("cursor", "move")
//创建遮罩层
$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body")
//获取弹出层
var msgObj = $("#" + div_Win)
msgObj.css('display', 'block') //必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据；如果弹出框为table，则为'',如果为div，则为block，否则textbox长度无法充满td
//y轴位置
var js_Top = -parseInt(msgObj.height()) / 2 + "px"
//x轴位置
var js_Left = -parseInt(msgObj.width()) / 2 + "px"
msgObj.css({ "margin-left": js_Left, "margin-top": js_Top })
//使弹出层可移动
msgObj.draggable({ handle: js_Title, scroll: false })
} 4、调用
<input type="button" value="测试弹出框" onclick="show_Win('div_Test', 'title', event)" />
<div id="div_Test">
<div id="title" style="border: 1px solid red">标题</div>
内容
</div>
