可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am designing a simple webpage. I want to display a popup window in the same page just like the image attached below.

I have no idea how to do this. If anyone can give me some code, it'll be great. Thanks in advance.

回答1:

In a very simple way you can do it keep z-index property in css of div and do hide and show of that div based on actions use this 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>

回答2:

I'd recommend using 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>

回答3:

I think you could try using jQuery Dialog (description here)... have you ever tried that?

Here is a short example:

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

回答4:

Here is on example. here the popup will show some checkboxes. you can add whatever you need (form,images,text) inside the div tag.

The Html code is shown below

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

The CSS code shown below

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

The javascript is shown below

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