防止多個彈出窗口點擊

我創建了一個使用多個彈出窗口來顯示信息的網站。但是，單擊任何按鈕時，所有彈出窗口都會立即打開，並會覆蓋我想顯示的信息。防止多個彈出窗口點擊

下面的代碼是我到目前爲止有：

的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>

如果您需要更多信息，請讓我知道。

感謝

來源

2016-07-25 Frand1951

至於說，你的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

來源

2016-07-25 12:02:19 Luca

嗨。這很好，謝謝！有什麼辦法可以讓你點擊一個已經激活的按鈕來關閉彈出窗口？ – 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"); 
}})

來源

2016-07-25 12:43:03 EddNewGate

防止多個彈出窗口點擊

回答

相關問題