Javascript “模式”上的“关闭”按钮；粘的；

我有以下页面：它基本上是一个打开的模式，只包含iframe嵌入

对于网站布局，我使用Bootstrap3。对于我正在使用的模式，它本身会生成关闭按钮

由于iframe嵌入的垂直列表很长，我试图将关闭按钮设置为fixed=sticky，这样处于模式底部的用户就不必一直滚动到顶部来关闭模式

我尝试了很多事情，大多数都与增加职位有关：固定的，但没有一个奏效

//this does not work unfortunately=> check the jsfiddle below
.messenger-close  {
   position: fixed
}

我不确定它是否相关，但我必须在这里进行设置，因为在iOS上我无法滚动iver iframes（由于这个调整，现在它工作正常）

下面是我为这个问题创建的JSFIDLE：

• JSFIDLE与我的代码：

• JSFIDLE的全屏显示：

我们单击以打开模式的页面

<a class="btn btn-primary" onclick="loadModal()">
  <span>click button</span>
</a>
      <script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- load some js scripts for embeds that follow -->
      <script async="" defer=""  src="//platform.instagram.com/en_US/embeds.js"></script>
      <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
      <script>//fb
      (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script>
function loadModal() {  
      var msg;
      var modal_content = '<div id="social-embeds-list">\
        <center>\
          <div id="embeds-wrapper">\
              <div id="item1" class="embed-list-item"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: rgb(255, 255, 255); border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px;"></iframe></div> \
              </div> \
              <div id="item1" class="embed-list-item"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: rgb(255, 255, 255); border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px;"></iframe></div> \
              </div> \
              <div id="item1" class="embed-list-item"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: rgb(255, 255, 255); border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px;"></iframe></div> \
              </div> \
              <div id="item1" class="embed-list-item"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: rgb(255, 255, 255); border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px;"></iframe></div> \
              </div> \
              <div id="item1" class="embed-list-item"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/BPodiIYgG3K/embed/captioned/?cr=1&amp;v=7" allowtransparency="true" frameborder="0" height="776" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: rgb(255, 255, 255); border: 1px solid rgb(219, 219, 219); margin: 1px 1px 12px; max-width: 320px; width: calc(100% - 2px); border-radius: 4px; box-shadow: none; display: block; padding: 0px;"></iframe></div> \
              </div> \
</center> \
</div>';

      msg = Messenger().post({
        message:  modal_content,
        showCloseButton: true,
        hideAfter: false
      });

}
</script>

模式css

// Hubspot Messenger options
Messenger.options = {
  extraClasses: 'messenger-fixed messenger-on-bottom animated slideInUp fullScreenModal',
  theme: 'flat',
  maxMessages: 1
};

// specific to fulscreen modals
.fullScreenModal {
  width: 100% !important;
  height: 100% !important;
  left: initial !important;
  margin-left: 0px !important;
  overflow-y: scroll;
    -webkit-overflow-scrolling: touch;// enable scrolling over iframes iOs 
}
ul.messenger.messenger-on-bottom.fullScreenModal {
  bottom: 0px !important;
  width: 100% !important;
  height: 100% !important;
  left: initial !important;
  margin-left: 0px !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;// enable scrolling over iframes iOs 
}

.messenger-close  {
   position: fixed
}

模态内容基本上只是一个嵌入列表，一个接一个地出现在垂直列表**（包含一个嵌入示例=>请注意，这只是一个示例，因为它们根据在后台办公室中定义的内容进行编程更改；嵌入的数量可能会有所不同）

为了更方便阅读，我选择了不包括这么多网络，只包括instagram。问题依旧

记住当前的关闭按钮（×），我想让“粘性”由Hubspot Messenger生成。您可以使用Chrome开发工具在JSFIDLE上检查hubspot生成的html和css（如果需要，可以操纵/覆盖css）

---

顺便说一句，我发现这是他们设法让它发挥作用的地方，但由于未知的原因，我无法将其应用到我的案例中。

应该简单如下：

ul.messenger-theme-flat .messenger-message .messenger-close{
  position: fixed;
  top: 20px;
  right: 30px;
}

我想你的尝试没有成功，因为你的体重太低了

---

您好，我的全局代码中一定有什么问题，因为您的JSFIDLE可以工作，但我的本地应用程序不能工作。我会更深入地搜索，但很快会给你分数。感谢你的帮助上帝我只花了4个小时一点一点地记住我的代码来理解为什么你的代码有效而我的代码无效。。。我编辑了我的问题：原因是难以置信=>我在jsfiddle外部资源中添加了animate.css，在jsfiddle Javascript中添加了class=animated slideInUp（在Hubspot Messenger类中）为了更好地模拟我的实际应用程序，它不再工作。所以我知道这是100%的原因。但是为什么？猜猜看？这是一个带有我的animate.css的jsfiddle，现在带有你的建议的jsfiddle不起作用了…就像我的实际应用程序一样：）=>很难确定这个animate.css是罪魁祸首。毕竟，这是一些东西影响了模型的工作方式呃，在屏幕上…看他们的库，这只是一些转换…但看，我可能有同样的问题。虽然它仍然是写固定的，但它的行为是“绝对的”

ul.messenger-theme-flat .messenger-message .messenger-close{
  position: fixed;
  top: 20px;
  right: 30px;
}