JS弹出层

最新推荐文章于 2016-09-14 10:57:00 发布

原创最新推荐文章于 2016-09-14 10:57:00 发布 · 122 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文详细介绍了JS弹出层的基本原理，并提供了一个简单的实现示例，包括事件触发、DIV显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS弹出层

弹出层的基本原理是就是通过事件触发一个DIV的显示与隐藏，模拟窗口的打开与关闭。

下面是一个简单的实现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
                $(document).ready(function(){
                        $("a").click(function(){
                                $("#mydiv").show();
                        });
                        $("span").click(function(){
                                $("#mydiv").hide();
                        });
                });
        </script>
        <style type="text/css">
                #mydiv{
                        width:200px;height:200px;border:1px solid #000000;display: none;
                }
                #mydiv h5{ height: 30px;line-height: 30px;font-size:14px;background-color:#316AC5; margin-top: 0px}
                #mydiv h5 span{float:right;padding-right:10px;}
                #mydiv p{padding: 10px}
        </style>
</head>
<body>

<a href="#">弹出层</a>
<div id="mydiv">
        <h5>弹出层标题<span>关闭</span></h5>
        <p>弹出层内容：这是一个弹出层</p>
</div>
</body>
</html>