Question

我正在尝试在webflow中使用jQuery创建多个模态，现在我只能创建一个，如果我重复代码它只是相互坐在一起。

我有8个链接图片，应该打开8个不同的模态窗口，每个窗口都包含来自youtube的嵌入式视频，并且近距离关闭它们，就像现在它仍然在后台播放一样。我正在使用webflow.com js工作一个星期，现在是新的js，但由于这个和形式开始研究它我的大脑疼痛:)。请帮忙

这是html标记：

<div class="w-section modal-bg">
    <div class="w-clearfix modalw"><a href="#" class="close-modal">X</a>
      <div class="w-embed w-iframe">
        <iframe height="498" width="510" src="http://video1" frameborder="0" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>

<div class="w-section modal-bg1">
    <div class="w-clearfix modalw"><a href="#" class="close-modal">X</a>
      <div class="w-embed w-iframe">
        <iframe height="498" width="510" src="http://video2" frameborder="0" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>

CSS：

  .modal-bg {
      position: fixed;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      z-index: 9999;
      display: none;
      width: auto;
      margin: 20px auto auto;
      background-color: transparent;
    }

    .modalw{
      width: 50%;
      margin-right: auto;
      margin-left: auto;
      padding: 10px;
    }

    .close-modal {
      padding-right: 10;
      padding-left: 10px;
      float: right;
    }

    }

jQuery代码：

$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-bg').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-bg').fadeOut();
  });
});

Answer 1

您是否尝试过使用.toggle()方法？像这样：

$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-bg').toggle();
  });
  $('.close-modal').click(function() {
    $('.modal-bg').toggle();
  });
});

您还可以指定切换的持续时间，例如.toggle(400)，其中指定的数字以毫秒为单位，以模仿.fadeIn()/.fadeOut()
更多信息here。

使用jQuery打开多个视频嵌入模式

1 个答案: