防止多个弹出窗口点击

问题描述：

我创建了一个使用多个弹出窗口来显示信息的网站。但是，单击任何按钮时，所有弹出窗口都会立即打开，并会覆盖我想显示的信息。防止多个弹出窗口点击

下面的代码是我到目前为止有：

的Javascript：

（我认为这可能是在那里我有我的错误是，当点击一个按钮，点击另一个按钮只会关闭弹出，当我打算将不会打开一个新的）

function deselect(e) { 
    $('.pop').slideToggle('normal', function() { 
    e.removeClass('selected'); 
    }); 
} 

$(function() { 
    $('#youtube, #youtube-popup').on('click', function() { 
    if ($(this).hasClass('selected')) { 
     deselect($(this)); 
    } else { 
     $(this).addClass('#youtube'); 
     //  $(this).removeClass('#twitch'); 
     $('.pop').slideToggle(); 
    } 
    return false; 
    }); 

    $('.close').on('click', function() { 
    deselect($(this).closest('#youtube, #youtube-popup')); 

    return false; 
    }); 
});

CSS：

.messagepop { 
    background-color: #ffffff; 
    opacity: 1; 
    color: #000000; 
    display: none; 
    bottom: 0px; 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 20%; 
    z-index: 50; 
    padding: 25px 25px 20px; 
    text-align: center; 
    vertical-align: middle; 
} 

.messagepop p, 
.messagepop.div { 
    padding-top: 200px; 
}

HTML：

我可能过于复杂这部分可能已导致更多的错误。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<body bgcolor="grey"> 

<div class="container"> 
    <div class="row"> 
    <br> 
     <ul class="list-inline"> 
     <div class="hover"> 
      <img href="" id="youtube" src="http://geniussys.com/img/placeholder/blogpost-avatar-50x50.png" padding="1px 1px 1px 1px"></div> 
     <div class="hover"> 
      <img href="" id="twitter" src="http://geniussys.com/img/placeholder/blogpost-avatar-50x50.png" padding="1px 1px 1px 1px"></div> 
     <div class="hover"> 
      <img href="" id="facebook" src="http://geniussys.com/img/placeholder/blogpost-avatar-50x50.png" padding="1px 1px 1px 1px"></div> 
     </ul> 
    </div> 
    </div> 

    <div class="messagepop pop"> 
    <div id="youtube-popup"> 
     <font size=5><b>Text 1</b> 
    <br><font size=2> 
    Text 1. 
    <br><font size=5><b>Text 2</b> 
    <br><font size=2>Text 2. 
    </font> 

    <div class="messagepop pop"> 
    <div id="twitter-popup"> 
    <font size=5><b>Text 3</b> 
    <br><font size=2>Text 3. 
    <br><font size=5><b>Text 4</b> 
    <br><font size=2>Text 4. 
    <br><font size=5><b>Text 5</b> 
    <br><font size=2>Text 5. 
    </font></div> 
    </div> 

    <div class="messagepop pop"> 
    <div id="facebook-popup"> 
     <font size=5><b>Text 6</b> 
    <br><font size=2>Text 6. 
    </font></div> 
    </div>

如果您需要更多信息，请让我知道。

感谢

答

至于说，你的HTML没有很好地形成在所有（[UL]标签必须有[李]孩子，[font =宋体]是HTML5不支持），而JavaScript是......不好！

可以实现期望的行为与单一功能

$('img').on('click', function() { 
    $('.pop.active').each(function() { $(this).slideToggle(); $(this).removeClass('active'); $('#' + $(this).data('refli')).removeClass('selected'); }); 
    var myId= $('#' + $(this).attr('id')); 
    var myPop= $('#' + $(this).attr('id') + '-popup'); 
    myId.addClass('selected'); 
    myPop.addClass('active'); 
    myPop.slideToggle(); 
    });

Here you can find a quick sample

嗨。这很好，谢谢！有什么办法可以让你点击一个已经激活的按钮来关闭弹出窗口？ – Frand1951

是的，我更新了jsfiddle https://jsfiddle.net/u448h12a/1/ – Luca

答

当使用<font>标签，你应该藏汉关闭他。在使用<ul>标签时，您必须具有<li>标签。你的jQuery代码是一团糟，对不起。我为你可能在寻找的东西写了一个更简单的例子。

检查小提琴：https://jsfiddle.net/xtmzq2pn/1/

$(".box").on("click",function(){ 
if($(this).is("#square1")){ 
$("#text1").slideToggle(); 
$("#text2").css("display","none"); 
$("#text3").css("display","none"); 
}else if($(this).is("#square2")){ 
$("#text2").slideToggle(); 
$("#text1").css("display","none"); 
$("#text3").css("display","none"); 
}else if($(this).is("#square3")){ 
$("#text3").slideToggle(); 
$("#text2").css("display","none"); 
$("#text1").css("display","none"); 
}})

防止多个弹出窗口点击

相关推荐