怎样用js实现点击<a>时制出现一个弹窗

JavaScript012

怎样用js实现点击<a>时制出现一个弹窗,第1张

为超链接添加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>