修复弹出框并使背景滚动

时间：2016-05-17 10:39:41

标签： javascript jquery html css3

我正在研究这个弹出框，当我点击图像时会触发，现在我有8个图像，我已经应用了弹出框，我想让弹出框固定，背景滚动，这样，无论图像位置如何，弹出框都将保持在屏幕上相同的位置。

(function(){

    var container = document.documentElement,
        popup = document.querySelector( '.avgrund-popup' ),
        cover = document.querySelector( '.avgrund-cover' ),
        currentState = null;

    addClass( container, 'avgrund-ready' );

    // Deactivate on ESC
    function onDocumentKeyUp( event ) {
        if( event.keyCode === 27 ) {
            deactivate();
        }
    }

    // Deactivate on click outside
    function onDocumentClick( event ) {
        if( event.target === cover ) {
            deactivate();
        }
    }

    function activate( state ) {
        document.addEventListener( 'keyup', onDocumentKeyUp, false );
        document.addEventListener( 'click', onDocumentClick, false );

        removeClass( popup, currentState );
        addClass( popup, 'no-transition' );
        addClass( popup, state );

        setTimeout( function() {
            removeClass( popup, 'no-transition' );
            addClass( container, 'avgrund-active' );
        }, 0 );

        currentState = state;
    }

    function deactivate() {
        document.removeEventListener( 'keyup', onDocumentKeyUp, false );
        document.removeEventListener( 'click', onDocumentClick, false );

        removeClass( container, 'avgrund-active' );
    }

    function disableBlur() {
        addClass( document.documentElement, 'no-blur' );
    }

    function addClass( element, name ) {
        element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name;
    }

    function removeClass( element, name ) {
        element.className = element.className.replace( name, '' );
    }

    window.avgrund = {
        activate: activate,
        deactivate: deactivate,
        disableBlur: disableBlur
    }

})();
* {
  margin: 0;
	padding: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.popup_container{
	height: 100%;
	overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
}

p{
	margin: 10px 0 10px 0;
	font-size: 16px;
	line-height: 1.32;
}

.pop_img{
	cursor:pointer;
}

button {
  position:relative;
  float:right;
  padding:5px;
	border: 0px;
  width:35px;
  height:35px;
	border-radius:50%;

	cursor: pointer;
	color:#91cd85;
	font-size:20px;

	-webkit-transition: 0.15s background ease;
	   -moz-transition: 0.15s background ease;
	    -ms-transition: 0.15s background ease;
	     -o-transition: 0.15s background ease;
	        transition: 0.15s background ease;
}

button:hover{
  color:#fff;
  background-color:#91cd85;
}
	button+button {
		margin-left: 5px;
	}

.popup_container{
	background: #fff;
	font-family: 'Lato', Helvetica, sans-serif;
	font-size: 16px;
	color: #222;
}
	.avgrund-active body {
		-webkit-transform: scale( 0.9 );
		   -moz-transform: scale( 0.9 );
		    -ms-transform: scale( 0.9 );
		     -o-transform: scale( 0.9 );
		        transform: scale( 0.9 );
	}

	.avgrund-active .avgrund-cover {
		visibility: visible;
		opacity: 1;
	}

.avgrund-contents {
	position: relative;
	padding: 20px;
	max-width: 400px;
	height: 100%;
	margin: auto;
}
	.avgrund-active .avgrund-contents {
		-webkit-filter: blur(2px);
		   -moz-filter: blur(2px);
		    -ms-filter: blur(2px);
		     -o-filter: blur(2px);
		        filter: blur(2px);
	}
	.no-blur.avgrund-active .avgrund-contents {
		-webkit-filter: none;
		   -moz-filter: none;
		    -ms-filter: none;
		     -o-filter: none;
		        filter: none;
	}

.avgrund-popup {
	display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: auto;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #ffffff;
  padding: 25px;
  border-radius: 5px;
  z-index: 10;
	box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
	border-radius: 3px;

	-webkit-transform: scale( 0.8 );
	   -moz-transform: scale( 0.8 );
	    -ms-transform: scale( 0.8 );
	     -o-transform: scale( 0.8 );
	        transform: scale( 0.8 );
}

.pop_head{
  padding-bottom:30px;
}

.inner_content{
  width:100%;
  max-height:250px;
  overflow-y: scroll;
}

 .pop_head h2{
  max-height:350px; 
  text-align:center;
  overflow:hidden;
}

.inner_content .details{
  margin-top:30px;
  line-height:15px;
 
}

	.avgrund-active .avgrund-popup {
    display:block;
		visibility: visible;
		opacity: 1;

		-webkit-transform: scale( 1.1 );
		   -moz-transform: scale( 1.1 );
		    -ms-transform: scale( 1.1 );
		     -o-transform: scale( 1.1 );
		        transform: scale( 1.1 );
	}
	.avgrund-popup.stack {
		-webkit-transform: scale( 1.5 );
		   -moz-transform: scale( 1.5 );
		    -ms-transform: scale( 1.5 );
		     -o-transform: scale( 1.5 );
		        transform: scale( 1.5 );
	}
	.avgrund-active .avgrund-popup.stack {
		-webkit-transform: scale( 1.1 );
		   -moz-transform: scale( 1.1 );
		    -ms-transform: scale( 1.1 );
		     -o-transform: scale( 1.1 );
		        transform: scale( 1.1 );
	}


.avgrund-ready body,
.avgrund-ready .avgrund-contents,
.avgrund-ready .avgrund-popup,
.avgrund-ready .avgrund-cover {
	-webkit-transform-origin: 50% 50%;
	   -moz-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	     -o-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;

	-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	   -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	    -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	     -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	        transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.avgrund-ready .avgrund-popup.no-transition {
	-webkit-transition: none;
	   -moz-transition: none;
	    -ms-transition: none;
	     -o-transition: none;
	        transition: none;
}
<div class="popup_container">
<div class="avgrund-contents">
	<a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png" /></a>
</div>
  
  <div class="avgrund-contents">
	<a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png" /></a>
</div>
  
  <div class="avgrund-contents">
	<a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png" /></a>
</div>
  
  <div class="avgrund-contents">
	<a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png" /></a>
</div>
  
  <div class="avgrund-contents">
	<a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png" /></a>
</div>
  
  <div class="avgrund-contents">
	<a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png" /></a>
</div>

  
  
<div class="avgrund-popup">
 <div class=pop_head>
  <button onclick="avgrund.deactivate();">x</button>
    <h2>Title</h2>
   </div>
	<div class=inner_content>
		<p class=details>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>

<p class=details>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>    
    
<p class=details>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p> 
    
<p class=details>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>  
    
<p class=details>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p> 
    
<p class=details>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>     
	</div>
  </div>

这就是我想要实现的目标 https://codepen.io/digstheone/pen/xVNrzJ

2 个答案:

答案 0 :(得分：0)

我将在图像的容器外生成弹出窗口，然后使用z-index进行播放，以便将图像堆叠在地下。

答案 1 :(得分：0)

将你的模态放在顶部，如下面的html，并使用follwoing css。

<div class="popup_container">
  <div class="avgrund-popup  stack  stack">
 <div class="pop_head">
  <button onclick="avgrund.deactivate();">x</button>
    <h2>Title</h2>
   </div>
    <div class="inner_content">
        <p class="details">You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>

<p class="details">You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>    

<p class="details">You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p> 

<p class="details">You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>  

<p class="details">You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p> 

<p class="details">You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
</p>     
    </div>
  </div>
<div class="avgrund-contents">
    <a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png"></a>
</div>

  <div class="avgrund-contents">
    <a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png"></a>
</div>

  <div class="avgrund-contents">
    <a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png"></a>
</div>

  <div class="avgrund-contents">
    <a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png"></a>
</div>

  <div class="avgrund-contents">
    <a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png"></a>
</div>

  <div class="avgrund-contents">
    <a class="pop_img" onclick="avgrund.activate( 'stack' );"><img src="https://cdn4.iconfinder.com/data/icons/IMPRESSIONS/medical/png/256/doctor.png"></a>
</div>
</div>

并使用此css：

.avgrund-popup {
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    display: none;
    height: auto;
    margin-left: -200px;
    margin-top: -150px;
    padding: 25px;
    position: fixed;
    transform: scale(0.8);
    width: 400px;
    z-index: 10;
}
.avgrund-popup.stack {
    margin: auto !important;
    margin-top: 10%;
}
相关问题
最新问题