我有点击文本链接弹出的JQuery Popup导航
然而,弹出窗口中点击的任何链接都会关闭弹出窗口。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(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://s5.postimage.org/ypgcl25pv/close.png" class="btn_close" alt="close" /></a>');
$('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend;
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and 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 - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
// add click listener to hole page
$('html, body').click(closePopup);
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', closePopup);
// Prevent the listener for the hole page
$("#popupContainer").click(function (e) {
e.stopPropagation();
});
function closePopup(e) {
$('#fade , .thepopup').fadeOut(function () {
$('#fade, a.close').remove(); //fade them both out
});
$('html, body').unbind('click', closePopup);
return false;
}
});
</script>
CSS
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
background-image: url();
background-attachment: fixed;
background-size:contain;
background-position: right;
padding: 38px;
text-style: bold;
border: 2px solid #363636;
float: left;
font-size: 10px;
font-family: ;
line-height:15px;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 0px;
border-radius: 20px;
}
img.btn_close {
float: right;
margin: -25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
#titlea {
font-size:40px;
color:#ccc;
font-family: 'Mr De Haviland', cursive;
text-align:center;
}
a {
color:#000;
text-decoration:none;}
#infos {
text-align:center;
font-size:15px;
padding:20px;
color:#ccc;
}
#infos a {
margin:7px;
line-height:50px;
background:#fe3887;
width:160px;
display:inline-block;
overflow:hidden;
text-align:center;
padding:5px;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
#infos a:hover {
color:#000;
background:#ccc;
border-radius:0px;
}
#wrap {margin:auto;
float:center;
width:100%;
height:100%;
position:relative;
background:#fff;
opacity:.8;
margin-top:5%;
}
网站为http://www.blackandkillingit.com
当导航弹出窗口出现时,当用户点击链接时,它将把它们带到网址。
答案 0 :(得分:0)
我不清楚我们应该点击什么来打开这个网站的弹出菜单,但现在网站最明显的错误之一就是jQuery正在运行1.9.1版本,没有.live
。