关键词

弹出框

HTML代码实现简单弹出框功能的方法和示例

使用HTML代码实现简单弹出框功能,需要使用到标签和<div>标签。

定义一个标签,并且设置属性href="javascript:void(0);",来实现点击该标签时候的触发事件,如:

<a href="javascript:void(0);">点击此处弹出框</a>

定义一个<div>标签,用来作为弹出框的显示内容,并且设置属性,来实现初始化时候不显示的效果,如:

<div id="popup" >弹出框内容</div>

使用JavaScript代码,在标签的onclick事件中,获取<div>标签,并将其显示出来,如:

<script type="text/javascript">
    function showPopup(){
        var popup = document.getElementById("popup");
        popup.style.display = "block";
    }
</script>
<a href="javascript:void(0);" onclick="showPopup()">点击此处弹出框</a>
<div id="popup" >弹出框内容</div>

以上就是使用HTML代码实现简单弹出框功能的方法,通过简单的几行代码,可以实现点击按钮弹出框的效果。

本文链接:http://task.lmcjl.com/news/5348.html

展开阅读全文