在js中制作div弹出框

最新推荐文章于 2022-12-01 17:25:18 发布

SnowUnicorn

最新推荐文章于 2022-12-01 17:25:18 发布

阅读量1.3k

点赞数

分类专栏：前台开发文章标签： js 控件 div弹出框 CSS

本文链接：https://blog.csdn.net/shixihaoma/article/details/38427235

版权

前台开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在项目中遇到新的需求，要求在表格中各具单元格信息，来对单元格中的图标进行查询，查询结果以弹出框的形式展现，同时该弹出框随着用户点击不同单元格而改变位置和内容。由此产生在js文件中来制作div弹出框。

首先，在HTML页面中对相应的div控件进行定义和声明：

//要弹出的区域
<div id="Popup"></div> popup_info

然后，在js文件中设置显示该弹出div的功能函数：

function show_Popup
{
    var bHeight = $(document).height();
    var bWeight = $(document).width();
    $("#Popup").css({width:bWeight,height:bHeight,display:"block"});
    var x = $(window).width()/2;
    var y = $(window).height()/2;

    var div_w = 170;
    var div_h = 170;
    var stop = document.documentElement.scrollTop;
     var left = x - div_w + left + "px";
     var top = y - div_h + stop + "px";
     $("#popup_info").css({"position":"absolute",left:left,top:top});
      $("#popup_info").show("block");
}

最后，对弹出页框进行CSS设置，根据要求来对div进行设置，该div的样式主要是在CSS中，所以此处比较难以设置。例如，该处div进行简单设置如下：

#fPopup{  
            position:absolute;  
            cursor:pointer;  
            background-color: #000000;  
            display: none;  
            z-index: 100;  
            left: 0px;  
            top: 0px;  
            filter: Alpha(Opacity=50);  
            -moz-opacity: 0.5;  
            opacity: 0.5;  
}