【问题标题】:Jquery Popup Navigation Links do not work on clickJquery Popup Navigation Links 在点击时不起作用
【发布时间】:2015-11-26 13:55:07
【问题描述】:

我有一个 JQuery 弹出式导航,在单击文本链接时会弹出

但是,在弹出窗口中单击的任何链接只会关闭弹出窗口。

<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

当出现导航弹出窗口时,当用户单击链接时,会将他们带到 url。

【问题讨论】:

  • 仅仅打开那个网站就会出现大量异常。
  • 我也希望 $('html, body').click(closePopup);有 .not("a") 什么的
  • @mplungjan 不是开发人员,所以不确定您的意思
  • 事件处理程序可以是选择性的。 .not("a") 表示排除链接
  • @mplungjan 是否可以在我的代码中插入您的意思?并复制粘贴?

标签: jquery hyperlink menu navigation popup


【解决方案1】:

我不清楚我们应该点击什么来在这个网站上弹出一个弹出菜单,但目前该网站最明显的错误之一是 jQuery 正在运行版本 1.9.1,它没有.live.

【讨论】:

  • 弹出窗口中 jquery 中的代码是 1.4.1,但您让我在 html 中搜索 1.9.1,我在底部附近找到了它。不是开发人员,所以不确定这意味着什么或如何解决它
  • 点击“更多”弹出菜单,抱歉。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-22
  • 1970-01-01
相关资源
最近更新 更多