CODEWITHSUNDEEP
javascriptcsspopupmodal-dialog
sites
sites

Reputation: 21775

Modal window with just CSS

Is this possible, or do I have to use JavaScript to set modal height to body height? for example:

$('.modal').height($('body').height())

I can't use this CSS:

.modal{
  position: relative;
  height: 100%;
}

Because modal parent height is calculated according other children.

Upvotes: 0

Views: 263

Answers (1)

Gilman
Gilman

Reputation: 574

You can use CSS as you list above but use absolute positioning.

.modal {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;
}

Just remember that the element will be positioned relative to it's first positioned ancestor.

So, if you want this to be positioned relative to the top left corner of the browser, make sure the modal element is not nested inside of another positioned element elsewhere on the page.

Upvotes: 2

Related Questions