开发者

Css simple modal rules

i have a simple modal divs:

<div class="modal"></div>
<div class="modal-content"></div>

then theyr related Css rules:

.modal{position:fixed;background:#444;opacity:0.5;width:100%;height:100%;left:0;right:0;bottom:0;top:0;}
.modal-content{position:fixed;background:#fff;width:auto;height:auto;top:25%;开发者_运维问答left:25%;right:25%;}

what i would like is that .modal-content remains always centered on page with a max-width of 500px; while width:auto;

is it possible to do without using js?


how about adding

max-width:500px;
margin:0 auto 0 auto;

to .modal-content

Hope that's what you were looking for, cheers.


It's a bit tricky, but can be achieved. Have a look here for some examples: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

A lot easier to do with Javascript and jQuery though, especially if your container can have a fixed position. What browsers do you need to support?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜