Question

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

对于网站布局，我使用的是bootstrap 3.对于我使用Hubspot Messenger的模态，它本身会生成关闭按钮。

由于iframe嵌入的垂直列表很长，我试图将关闭按钮设置为fixed = sticky，以便模态底部的用户不必一直滚动到顶部关闭模态。

我尝试了很多东西，大部分与添加位置相关：固定，但没有效果。

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

我不确定它是否相关，但我必须在此设置following this advice，因为在iOS上我无法滚动iver iframe（现在它可以正常工作，因为这个调整）。

.fullscreenmodal {
    -webkit-overflow-scrolling: touch;  
}

这是我为这个问题创建的一个jsfiddle：

jsfiddle with my code：https://jsfiddle.net/68uLkepy/
jsfiddle的全屏视觉：https://jsfiddle.net/68uLkepy/embedded/result/

我们点击以打开模态的页面

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

Hubspot Messenger模式设置

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

模态css

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

模态内容基本上只是一个嵌入列表，一个接一个地放在一个垂直列表中**（包含一个嵌入的例子=＆gt;注意它只是一个例子，因为它们根据什么有所改变。在一种后台中定义;嵌入的数量可以变化）

为了更方便阅读，我选择不包括这么多网络而只包含Instagram。问题依然存在。

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

顺便说一句，我发现这个codenpen他们设法让它发挥作用，但我无法将其应用于我的案例中。

Answer 1

应该如下简单：

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

我认为由于specificity较低，您的尝试无效。

https://jsfiddle.net/tao879gq/

在Modal上设置关闭按钮“粘性”

1 个答案: