模态窗口 - 如何在所有屏幕上？ [英] Modal window - how to over all screen?

问题描述

 < a href =＃dialogname =modal>简单模态窗口< / a> 
 
< div id =boxes> 
这应该在模态
 
<！ -  #customize你的模态窗口在这里 - > 
 
< div id =dialogclass =window> 
 测试模态窗口 | 
 
 <！ -   - 关闭按钮被定义为关闭类 - > 
< a href =＃class =close>关闭它< / a> 
 
< / div> 
< br /> 
这也是
<！ - 不要删除div＃掩码，因为你需要它来填充整个屏幕 - > 
< div id =mask>< / div> 
< / div> 
  

LIVE： http://jsfiddle.net/ruwmh/

如何在所有屏幕上显示该模式屏幕？现在这不是解决方案

你应该像这样改变CSS

  #mask {
 position：absolute; 
 z-index：9000; 
 / *左上和左上增加* / 
左：0; 
 top：0; 
背景颜色：＃000; 
 display：none; 
} 
  

小提琴 http://jsfiddle.net/ruwmh/1/

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

LIVE: http://jsfiddle.net/ruwmh/

How to make that modal screen be on all screen? Now this isnt o

解决方案

You should change the CSS like this

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

fiddle here http://jsfiddle.net/ruwmh/1/

这篇关于模态窗口 - 如何在所有屏幕上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！