防止单击时打开多个弹出窗口

Prevent multiple popups opening on click

本文关键字：窗口 单击      更新时间：2023-09-26

我创建了一个网站，它使用许多弹出窗口来显示信息。然而，当点击任何按钮时，所有弹出窗口都会同时打开，并会掩盖我想要显示的信息。

以下是我迄今为止的代码：

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]标记必须有[li]子级，HTML5中不支持[font]），并且您的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();
  });

在这里您可以找到一个快速样本

使用<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");
}})
相关文章：