自己整理一个div的jquery弹窗效果

最新推荐文章于 2025-05-14 13:39:30 发布

luyangyy

最新推荐文章于 2025-05-14 13:39:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery pop javascript

本文链接：https://blog.youkuaiyun.com/luyangyy/article/details/50771129

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的自定义弹窗插件，包括弹窗显示与隐藏的控制逻辑及样式设置。该插件可通过函数调用轻松展示带有确认和取消按钮的提示框。

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

js：

 function letDivCenter(divName)
    {
        var top = $(divName).height();
        var left = ($(window).width() - $(divName).width()) * 482 / 1000;
        var scrollTop = $(document).scrollTop();
        var scrollLeft = $(document).scrollLeft();
        $(divName).css({
            position: 'absolute',
            top: top+scrollTop,
            left: left+scrollLeft
        }).show(700);
    }
function show_or_hide_pop_div(msg,type){
  var _pop=$("#pop_div");
  var _msg=$("#err_msg_span");
  if(type=="show"){
    letDivCenter(_pop);
    if(_pop.hasClass("dis-n")){
      _pop.removeClass("dis-n");
      _msg.html(msg);
    }
  }
  else{
    
    if(!_pop.hasClass("dis-n")){
      _pop.removeAttr("style");
      _pop.addClass("dis-n");
     
    }
  }
}

div:

   <div id="pop_div" class="pop-pos-pay h-180 dis-n">
    <div class="pop-con-pay-fff h-160">
        <a href=""><i class="pop-close"></i></a>
        <!--第一行15字最多--><p class="f-16"><i class="b-tan-icon"></i><span id="err_msg_span">是否确定？</span></p>
        <p class="mar-l-90 f-16"> </p>
        <p class=" text-c mar-t-10"> <input type="button" id="confirm" value="确定" class=" pop-pos-pay-btn"  /><input type="button" value="取消" id="cancel" class="pop-pos-pay-btn mar-l-30" onclick="show_or_hide_pop_div('','hide')" /></p>
    </div>
</div>

引用；

显示： show_or_hide_pop_div("确定！","show");

隐藏： show_or_hide_pop_div("","hide");

//弹窗确定按钮事件
$("#confirm").click(function(){
show_or_hide_pop_div('','hide');
});

可结合使用：

$.post('',{},function(data){
if(true){

 show_or_hide_pop_div("确定！","show");

$("#confirm").click(function(){    
    show_or_hide_pop_div('','hide');
});
}
})

css:(不一定全部都有用，先存着)

.pop-pos{ width:386px; height:163px; border-radius:8px; background:rgba(0,0,0,0.5); -ms-background-color:rgb(0,0,0); -ms-filter:alpha(opacity=50);margin:200px auto;}
.pop-con{ width:366px; height:143px; background:#f4f4f4; margin:10px 0 0 10px; position:absolute;}
.h-105{ height:105px;}
.bor-bottom-1{ border-bottom:1px #d0cfcf solid; background:#fff;}
.pop-clo{ font-size:14px; color:#999; padding-left:10px; line-height:36px;}
.pop-title{ color:#116397; font-weight:600; font-size:16px;}
.pop-icon,.pop-icon-2,.pop-icon-collection1,.pop-icon-collection2{ width:44px; height:44px; display:block; margin-left:35px; float:left; }
.pop-icon{ background:url(images/icon.png) no-repeat -58px -99px;}
.pop-icon-collection1{ background:url(images/icon.png) no-repeat -280px -99px; margin-left:58px;}
.pop-icon-collection2{ background:url(images/icon.png) no-repeat -326px -99px; margin-left:58px;}
.l-22{ line-height:22px;}
.l-40{ line-height:40px;}
.padding-10{ padding:10px 10px 10px 14px;}

.pop-text{ width:260px; display:block; margin-left:90px; font-size:16px;}
.pop-pos-pay{ width:386px; height:222px;border-radius:8px; background:rgba(0,0,0,0.5); -ms-background-color:rgb(0,0,0); -ms-filter:alpha(opacity=50);margin:200px auto;  z-index:1002;
overflow: auto;}
.pop-con-pay{ width:366px; height:202px; background:#f4f4f4; margin:10px 0 0 10px; position:absolute;}
.pop-con-pay-fff{ width:366px; height:202px; background:#fff; margin:10px 0 0 10px; position:absolute;}
.b-tan-icon{ width:44px; height:44px; display:inline-block; background:url(images/icon.png) no-repeat -106px -99px; margin-bottom:-16px; margin-left:36px; margin-top:35px; margin-right:10px; }
.pop-pos-pay-btn{ padding:5px 20px; background:#bd1f2e; color:#fff; border:medium none; border-radius:6px; cursor:pointer;}
.pop-close{   float: right;width: 20px;height: 20px;display: block;background: url(images/icon.png) no-repeat -157px -64px; margin: 5px;}

.pop-position{ position:relative;}
.send-pop-1{ width:400px; height:300px; border:1px #aaa solid; margin:150px auto ; padding:25px;}
.send-pop-2{ width:550px;  border:1px #aaa solid; margin:150px auto ; padding:25px;}
.padding-1-5{ padding:1px 5px;}
.w-350{ width:350px;}
.send-pop-text{ margin-top:10px; border:1px #aaa solid; margin-right:10px;}
.send-pop-btn{ color:#fff; background:#bd1f2e; padding:3px 35px; cursor:pointer; border:medium none; border-radius:5px;}
.w-80{ width:80px;}
.pop-clo-icon{ width:26px; height:26px; display:inline-block; background:url(icon.png) no-repeat -212px -65px; margin-bottom:-7px;margin-left:8px;}
.mar--20{margin:-20px;}
.w-100{ width:100px;}
.w-315{ width:315px;}
.l-icon{  border-left:1px #aaa solid; margin-top:11px; padding-bottom:14px;}
.d-weizhi{ float:left; margin-top:-20px; display:inline-block;}
.mar-l--5{ margin-left:-5px;}
.mar-l-1{ margin-left:1px;}
.send-pop-area{ width:520px; height:160px; margin:20px auto;}
.send-pop-area-btn{color:#fff; background:#bd1f2e; padding:3px 19px; cursor:pointer; border:medium none; border-radius:4px; font-size:16px;}
.send-pop-image{width:900px;  border:1px #aaa solid; margin:50px auto ; height:800px; padding:8px 0;}
.pad-td-10{ padding:10px 0;}

.h-180{ height:180px;}
.h-160{ height:160px;}
.mar-l-90{ margin-left:90px;}

图片：

引用；

显示： show_or_hide_pop_div("确定！","show");

隐藏： show_or_hide_pop_div("","hide");