开发者

Positioning popup window in middle of the screen without JavaScript

开发者 https://www.devze.com 2023-02-12 17:15 出处:网络
I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?

I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?

CSS:

.floating-window {
    z-index: 9999;
   开发者_开发知识库 position: absolute;
    width: 200px;
height: 200px;  
    cursor: default;
    -moz-box-shadow: 1px 1px 1px #888;
    -webkit-box-shadow: 1px 1px 1px #888;
    box-shadow: 1px 1px 1px #888;
}

HTML:

<div class='floating-window box'></div>


With percentages, you can set your box such that half of it is on the left side. So

width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */

You could also use px but then you'll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.


Sure, it's possible, but how are you going to make it go away?

That's going to need JavaScript...

0

精彩评论

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