複数のポップアップがクリックで開くのを防ぐ

情報を表示するためにいくつかのポップアップを使用するウェブサイトを作成しました。ただし、いずれかのボタンをクリックすると、すべてのポップアップが一度に開き、表示したい情報を隠すことになります。以下は複数のポップアップがクリックで開くのを防ぐ

これまでのところ、私が持っているコードです：

Javascriptを：

（私は1つのボタンがクリックされたときに、これは私は、と私のエラーをしたことがあり場所を信じて、別のボタンをクリックします単にポップアップを閉じて、私はそれを意図したとおりに新しいものを開くことができません）

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]タグは、[フォント] HTML5でサポートされていない、[李]子供を持っている必要があります）すべてに形成され、かつ使いのブラウザではJavaScriptが...悪いですされていない、と述べました！

あなたは<font>タグを使用する場合は、あなたがaswell彼を閉じる必要があります

$('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

単一の機能を有する所望の動作を実現することができます。 <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

複数のポップアップがクリックで開くのを防ぐ

答えて

関連する問題