Question

我需要创建一个用于div的CSS属性的弹出窗口。

在那个弹出窗口中，我需要在另一个div中显示一些信息。

Answer 1

最简单的

    <html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>

Answer 2

我总是建议使用jQuery插件，这样您就不必担心弹出窗口的定位和样式。周围有许多好的灯箱插件，我最喜欢的是fancybox。

如果您还没有使用jQuery，那么为div创建“弹出式”样式的最简单方法是：

HTML

<div class="popup">This is the popup content</div>

CSS

.popup {
    position:absolute;
    background:#FFF;
    border:1px solid #000;
    width: 150px;
    height: 150px;
    left:50%;
    top:50%;
    margin-left:-75px;
    margin-top:-75px;
    padding: 20px;
}

Example

Answer 3

<强> HTML

<div class="popup">
    <div class="popup-data">
        some text here
    </div>    
</div>

CSS

.popup{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin: -100px 0 0 -150px;

    background-color: #F9F9F9;
    border: 1px solid #e5e5e5;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.popup-data{
    padding: 10px;
}

fiddle

需要使用CSS属性创建弹出窗口

3 个答案: