Question

<a href="#dialog" name="modal">Simple Modal Window</a>

<div id="boxes">
 this should be under modal

    <!-- #customize your modal window here -->

    <div id="dialog" class="window">
        <b>Testing of Modal Window</b> |

        <!-- close button is defined as close class -->
        <a href="#" class="close">Close it</a>

    </div>
    <br />
     this also
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
    <div id="mask"></div>
</div>

现场：http://jsfiddle.net/ruwmh/

如何在所有屏幕上显示模态屏幕？现在这不是o

Answer 1

您应该像这样更改CSS

#mask {
  position:absolute;
  z-index:9000;
 /*add left and top to position to upper left */   
 left:0;
  top:0;
  background-color:#000;
  display:none;
}

在这里摆弄http://jsfiddle.net/ruwmh/1/

Answer 2

http://jsfiddle.net/massivepenguin/gLQmp/

Answer 3

#mask {
  position: fixed;
  z-index:9000;
 /*add left and top to position to upper left */   
  left:0;
  top:0;
  background-color:#000;
  display:none;
}

与 Nicola Peluchetti 的答案相同，除了使用 position: fixed，因为它不会将坐标粘贴到带有 position: absolute/relative 的父母，而是使用 window

模态窗口 - 如何覆盖所有屏幕？

3 个答案: