Frand1951 Frand1951 - 4 months ago 18
HTML Question

Prevent multiple popups opening on click

I have created a website which uses a number of popups to display information. However, when any button is clicked, all the popups will open at once and will cover up the information I want to show.

Below is the code I have so far:

Javascript:

(I believe this may be where I have made my error as, when one button is clicked, clicking another button will simply close the popup and will not open a new one as I intended it to.)

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:

I may have over-complicated this part which may have lead to further errors.

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


If you need more information, please let me know.

Thanks

Answer

As said, your HTML is not well formed at all([ul] tag must have [li] children, [font] is unsupported in HTML5), and your javascript is...bad!

You can achieve desired behavior with a single function

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