Search code examples
csspopupmodal-dialogposition

modalDialog is not scrolling in css

i have used a modalDialog which reference is: modalDialog

by default, this is fixed in its position. the problem is when my contents grows up in this modal the modal hides in the bottom of page which is not scrolling. if i use position:absolute it is scrolling but main body gets ugly and changes into dark and white background. is there any experts to suggest me to solve the problem. please don't suggest me to use bootstrap modal. thank you.

Solution

  • Add .modalDialog { overflow-y: auto; }

    <!DOCTYPE html>

<head>
  <title>Creating a modal window with HTML5 &amp; CSS3</title>

  <style>
    .modalDialog {
        overflow-y: auto;
    		position: fixed;
    		font-family: Arial, Helvetica, sans-serif;
    		top: 0;
    		right: 0;
    		bottom: 0;
    		left: 0;
    		background: rgba(0,0,0,0.8);
    		z-index: 99999;
    		opacity:0;
    		-webkit-transition: opacity 400ms ease-in;
    		-moz-transition: opacity 400ms ease-in;
    		transition: opacity 400ms ease-in;
    		pointer-events: none;
    	}
    
    	.modalDialog:target {
    		opacity:1;
    		pointer-events: auto;
    	}
    
    	.modalDialog > div {
    		width: 400px;
    		position: relative;
    		margin: 10% auto;
    		padding: 5px 20px 13px 20px;
    		border-radius: 10px;
    		background: #fff;
    		background: -moz-linear-gradient(#fff, #999);
    		background: -webkit-linear-gradient(#fff, #999);
    		background: -o-linear-gradient(#fff, #999);
    	}
    
    	.close {
    		background: #606061;
    		color: #FFFFFF;
    		line-height: 25px;
    		position: absolute;
    		right: -12px;
    		text-align: center;
    		top: -10px;
    		width: 24px;
    		text-decoration: none;
    		font-weight: bold;
    		-webkit-border-radius: 12px;
    		-moz-border-radius: 12px;
    		border-radius: 12px;
    		-moz-box-shadow: 1px 1px 3px #000;
    		-webkit-box-shadow: 1px 1px 3px #000;
    		box-shadow: 1px 1px 3px #000;
    	}
    
    	.close:hover { background: #00d9ff; }
  </style>
</head>

<body>

  <a href="#openModal">Open Modal</a>

  <div id="openModal" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Modal Box</h2>
      <p>This is a sample modal box that can be created using the powers of CSS3.</p>
      <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
  </div>

</body>

</html>