为超链接添加onclick()动作,动作内容为弹出对话框。javascript提供了3种类型的对话框:
alert() : 提醒
confirm():确认,返回 true 或者 false
prompt():带输入的对话框
下面进行实例演示:
1、HTML结构
<a href="#" onclick="fun1()">你有一个礼物</a><a href="#" onclick="fun2()">我要接收礼物</a><a href="#" onclick="fun3()">必须先对暗号</a>2、javascript代码
function fun1(){ alert("你得到一个礼物!!")}function fun2(){ if(confirm("确定接收礼物?")) alert("对一下暗号先...")}function fun3(){ var code = prompt("请对暗号:") if(code) alert("给你礼物!!") else alert("蒙人呢!")} 无论是手机页面还是pc页面,弹出对话框都能用alert或者confirm
如果你是想弹出层。那也很简单。先用样式写好这个层,手机页面可以直接用position:fixed来定位。pc页面ie6不兼容这个样式,只能用绝对定位和样式表达式来做。
当你想弹层时,用js把这个层的display改成block就可以了。关闭则设这个层的display为none。
思路:
如果要输入多个信息,那么原生的提示框肯定不符合要求,需要自己定义。
一般都是使用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>