javascript - 在 Modal 上制作关闭按钮 "sticky"

Question

我有以下页面:它基本上是一个打开且仅包含 iframe 嵌入的模式。

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

由于 iframe 嵌入的垂直列表非常长，我尝试将关闭按钮设置为固定=粘性，以便模式底部的用户不必一直滚动到顶部关闭模式。

我尝试了很多事情，最重要的是添加位置:固定，但没有任何效果。

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

模态内容基本上只是一个嵌入列表，在垂直列表中一个接一个**(包含嵌入示例=>请注意，这只是一个示例，因为它们根据已发生的内容以编程方式更改在某种后台定义；嵌入的数量可能会有所不同)

为了更方便阅读，我选择不包含那么多网络，而只包含 Instagram。问题还是一样。

记住当前的关闭按钮(×)，我想让“粘性”是由Hubspot Messenger生成的。您可以使用 Chrome 开发工具在 jsFiddle 上检查 hubspot 生成的 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/