Geek Answers Handbook

Css for modal - how to place it over a page still scrollable in a window

Here is the html:

<body>
 <div class="ngdialog">
   <div class="ngdialog-overlay></div>
   <div class="ngdialog-content>
      ...modal content
   </div.
 </div>
<body>

the ngdialog div, as you might guess, is modal (z-index: 10000). My goal is to apply some style elements (position, float, etc.) to the elements to do it like this:

a) When the modal text is displayed, the overlay (gray and opacity; 0.5) covers all other elements on the page.

b) If the modal content is larger than the page, I would like the user to be able to use the main scroll bar to view the bottom / top of the modal. In other words, if the rest of the page is only 100 pixels and the modal is 200 pixels, I would like the scoll panel to allow the user to scroll an additional 100 pixels.

, , , ngdialog , , ( ).

, . , ( ) .

( ) , , , , float , , .

, - : ( ).

, .

: , , :

https://jsfiddle.net/vpgoy756/1/

+4
2

HTML, , :

* {
    /* This was to save typing */
    margin: 0;
    padding: 0;
}
html {
    width: 100%;
    height: 100%;
}
body {
    position: relative;
    width: 100%;
    min-height: 100%;
}
.ngdialog {
    z-index: 10000;
    text-align: center;
    overflow: hidden;
}
.ngdialog-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0, .4);
}
.ngdialog-content {
    position: absolute;
    z-index: 10000;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: auto;
}
.panel {
    margin-top: 50px;
    margin-left: 10%;
    margin-right: 10%;
    min-height: 500px;
    z-index: 10000;
}
.reg-page-block {
    width: 200px;
    height: 200px;
    display: inline-block;
    background-color: #0f0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ^ from your provided fiddle -->
<body>
    <div class="ngdialog">
        <div class="ngdialog-overlay"></div>
        <div class="ngdialog-content">
            <div class="panel panel-primary">
                <div class="panel-heading">modal</div>
                <div class="panel-body">content</div>
            </div>
        </div>
    </div>
    <div class="reg-page-block">Regular Page</div>
</body>
Hide result

, , , , - , .

+1

CSS , . , CSS, , , .

HTML:

<div class="ngdialog-overlay">
    <div class="ngdialog-content">CONTENT HERE</div>
</div>

CSS:

.ngdialog-overlay {
    display:block;
    width:100%;
    height:100%;
    background:#333333;
    background:rgba(0,0,0,0.8);
    z-index:10000;
    position:fixed;
    top:0;
    left:0;
    overflow: scroll;
}
.ngdialog-content{
    text-align: center;
    width:100%;
    height:100%;
    padding-top:30px;
    padding-bottom:30px;

    /* Optional if you want content vertically centered */
    display:table-cell;
    vertical-align: middle;
}

: : 100%; - , , . , , .ngdialog-overlay, .

http://jsfiddle.net/bcole808/6wcsxf3z/1/

0

More articles:


All Articles