Question

我想在商店页面点击立即购买时创建一个模态对话框，所以我实现了：

＆＃13;

#fade2 {    
display: none;    
background: #000;     
position: fixed; left: 0; top: 0;     
width: 100%; height: 100%;    
opacity: .80;    
z-index: 999;  }

.popup_block{    
display: none;    
background: #fff;    
padding: 20px;      
border: 20px solid #ddd;    
float: left;    
font-size: 1.2em;    
position: fixed;    
top: 50%; 
left: 50%;    
z-index: 9999999 !important;    
-webkit-box-shadow: 0px 0px 20px #000;    
-moz-box-shadow: 0px 0px 20px #000;    
box-shadow: 0px 0px 20px #000;    
-webkit-border-radius: 10px;    
-moz-border-radius: 10px;    
border-radius: 10px;}

img.btn_close {    
float: right;     
margin: -55px -55px 0 0;}

.popup p {    
padding: 5px 10px;    
margin: 5px 0;}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade2 {    position: absolute;}
*html .popup_block {    position: absolute;}

＆＃13;

<div class="shop-button">
  <a href="#" data-width="500" data-rel="popup1" class="btn btn-default btn-sm">Buy now
  </a>
</div>

＆＃13;

@Html

＆＃13;

但它不起作用，我用CSS中的z-index和其他东西尝试了很多东西，因为窗口出现在我的弹出窗口的背景之后。我想做这样的事情：Oracle site

我希望你能帮助我谢谢 Leana

Answer 1

我已为您制作了示例代码

＆＃13;

$(document).ready(function(){
						   		   
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
				
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value

		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://www.cyrankakolno.pl/img/close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
		
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
		
        	$('a.close, #fade').click(function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
		
		return false;
	});
        
		return false;
	});
	
	
	//Close Popups and Fade Layer


	
});

＆＃13;

#fade {
	display: none;
	background: #000; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none;
	background: #fff;
	padding: 20px; 	
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right; 
    width:50px;
	margin: -55px -55px 0 0;
}
.popup p {
	padding: 5px 10px;
	margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}

＆＃13;

<a href="#?w=500" rel="popup1" class="poplight">Width = 500px</a>

<div id="popup1" class="popup_block">
    <h2>Popup #1</h2>


    
</div>

＆＃13;

这是一个jsFiddle： Example

另外，您可以查看Bootstrap Modals这是一个很棒的图书馆。

模态窗口（弹出窗口）和背景

1 个答案: