如何显示弹出窗口

Question

我们希望在我们的网站上进行实时聊天以帮助用户。所以我们需要在第一页上有一个弹出窗口。点击它会出现一个用于聊天的窗口。

问题是当滚动浏览主页面时，弹出窗口会在主页面的框下面。你可以在这里看到它：

这是我的代码：

<!-- mibew button -->
<a id="mibew-agent-button" style="left: 2.5%; bottom: 2.5%; position: fixed;" onclick="Mibew.Objects.ChatPopups['5b1cbf2d5cf9dd0c'].open();return false;" href="/mibew/index.php/chat?locale=en" target="_blank">
  <img alt="" src="/mibew/index.php/b?i=mibew&amp;lang=en" border="0">
</a>
<script src="/mibew/js/compiled/chat_popup.js" type="text/javascript"></script>
<script type="text/javascript">
  Mibew.ChatPopup.init({
    "id": "5b1cbf2d5cf9dd0c",

    "url": "\/mibew\/index.php\/chat?locale=en",
    "preferIFrame": true,
    "modSecurity": false,
    "forceSecure": false,
    "width": 640,
    "height": 480,
    "resizable": true,
    "styleLoader": "\/mibew\/index.php\/chat\/style\/popup"
  });
</script>
<!-- / mibew button -->

我认为我们必须添加内联"style="left: 2.5%; bottom: 2.5%; position: fixed;"的HTML属性，但我不确定。

你可以帮我解决这个问题吗？

Answer 1

在模态中使用z-index: 1000; position: relative;属性

Answer 2

添加到您的模态窗口class =＆＃34; modal-custom＆＃34;，并使用内容添加到项目css样式中：

.modal-custom {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 10%;
}

将窗口置于页面中心。