jQuery与HTML自制弹出框

最新推荐文章于 2025-05-31 11:02:14 发布

原创最新推荐文章于 2025-05-31 11:02:14 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#弹出框 #jQuery #html

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用jQuery制作自定义弹窗效果，包括弹窗样式设置、位置调整及显示隐藏功能实现。

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

html自带的弹出框显示不友好，故使用jQuery在网页中自制弹出框。

代码如下：

<a href="javascript:void();" onclick="show()">弹出框</a>
   <div class="pop-main" id="pop_div_lzg">
   <div class="pop-header">
       <span>温馨提示</span>
    </div>
    <div class="pop-con">
        <p class="pop-text">弹出成功</p>
        <a href="javascript:void();" class="cancel-btn" onclick="hide()">关闭</a>
    </div>
    </div>
   <style type="text/css">
       .pop-main{
           width:300px;
           height:160px;
           position: fixed;
           left:50%;
           margin-left:-150px;
           top:50%;
           margin-top:-160px;
           border:4px solid rgba(0,0,0,0.1);
           border-radius:5px;
           display:none;
           overflow: hidden;
           z-index:10001;
           padding: 0;
           color:#666666;
           font:12px/150% microsoft yahei;
       }
       .pop-header{
           background:#f7f7f7 none repeat scroll 0 0;
           color:#666;
           font-family:"Microsoft YaHei";
           font-size:14px;
           height:36px;
           line-height:36px;
           padding:0 10px;
           position: relative;
           cursor:auto;
       }
       .pop-con{
           padding:10px 50px 10px 50px;
           background:#fff none repeat scroll 0 0;
           min-height:80px;
           position:relative;
           text-align:center;
           cursor:auto;
           color:#666666;
           font:12px/150% microsoft yahei;
       }
       .pop-text{
           color:#ff9194;
           font-size:18px;
           font-weight:bold;
           line-height:1.5em;
           text-align:center;
           cursor:auto;
           width:200px;
       }
       .cancel-btn{
           background: #f5f5f5 none repeat scroll 0 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
            display: inline-block;
            height: 28px;
            line-height: 28px;
            padding: 0 10px;
            vertical-align: top;
       }
   </style>

   <script type="text/javascript" src="jquery-1.6.2.min.js">
   </script>
   <script type="text/javascript">
       function show(){
           $('#pop_div_lzg').show();
           /*加入自己的逻辑代码*/
       }
       function hide(){
           $('#pop_div_lzg').hide();
           /*加入自己的逻辑代码*/
       }
   </script>