Question

我正在设计一个简单的网页。我想在同一页面中显示一个弹出窗口，就像下面附带的图像一样。 enter image description here

我不知道该怎么做。如果有人能给我一些代码，那就太好了。提前致谢。

Answer 1

以一种非常简单的方式，您可以在div的css中保留z-index属性，并根据操作隐藏和显示该div 用这个 http://jsfiddle.net/b68Xb/327/

<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>

 <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

我建议使用bootstrap modals

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 3

我认为你可以尝试使用jQuery Dialog（描述here）...你有没有试过？

这是一个简短的例子：

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery UI Dialog - Default functionality</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <link rel="stylesheet" href="/resources/demos/style.css">
   <script>
      $(function() {
         $( "#dialog" ).dialog();
      });
   </script>
</head>
<body>
   <div id="dialog" title="Basic dialog">
      <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
   </div>
</body>
</html>

Answer 4

这里是示例。在此弹出窗口将显示一些checkboxes。您可以在form标签内添加所需的任何内容（images，text，div）。

Html代码如下所示

<button class="open-button" onclick="openPopup()" value="open"/>
    <div id="boxPopup">
     <form>
         <ul>
            <li><input class="checkbox" type="checkbox" name="testc"> Item 1</li>
            <li><input class="checkbox" type="checkbox" name="testc"> Item 2</li>
            <li><input class="checkbox" type="checkbox" name="testc"> Item 3</li>
            <li><input class="checkbox" type="checkbox" name="testc"> Item 4</li>
            <li><input class="checkbox" type="checkbox" name="testc"> Item 5</li>
            <li><input class="checkbox" type="checkbox" name="testc"> Item 6</li>
        </ul>
    <form>
    </div>

下面显示的CSS代码

<style>      
        #boxPopup {
            display: none; 
            position: fixed; 
            z-index: 1; 
            padding-top: 100px; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }             
        .open-button {
            background-color: #1c87c9;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0.8;
            position: fixed;
        }
        /* Hide Popup*/
        .form-popup {           
            z-index: 9;
            max-width: 90%;
            max-height: 90%;
            overflow-x:scroll;
            margin: 0 auto;
        }                              
    </style>

javascript如下所示

 <script>
        function openPopup() {
            document.getElementById("boxPopup").style.display = "block";
        }

        function closePopup() {
            document.getElementById("boxPopup").style.display = "none";
        }
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            var modal = document.getElementById('boxPopup');
            if (event.target == modal) {
                closePopup();
            }
        }

    </script>

将div工作作为弹出窗口

4 个答案: