时间戳

首页 > 解决方案 > 由 chrome 扩展程序呈现时，Bootstrap Modal 无法正确显示

javascript - 由 chrome 扩展程序呈现时，Bootstrap Modal 无法正确显示

问题描述

我正在编写一个 chrome 扩展程序，我在其中工作的网页列出了一些内容。所以，基本上，我正在阅读该表并在 javascript 中进行一些计算并以模式显示它们。下图在一定程度上表明： 在此处输入图像描述

图像中的数据被有意删除。我在模态中遇到了一个问题，即它没有正确出现，即我的模态比模态内容更大。我可以通过为某个值添加一个边距底部来修复它。它确实有效，但如果我更改屏幕分辨率，那么它不会得到调整。请在下面找到此代码：

<html>
<head>
<script type="text/javascript">
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the <span> element that closes the modal
    var span = document.getElementById("modalClose");

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    };

    var element = document.getElementsByClassName("nav-collapse")[0];
    element.classList.remove("collapse");

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    };

    var button = document.getElementsByClassName("btn")[0];

    button.onclick = function(event) {
        if(button.value === 'Switch to Values') {

        }
    }
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head> 
<body>
    <div id="myModal" class="modal" style="top: 50%; bottom: 0%; left: 40%; right: 50%; width: 60%; margin-bottom: 110px; ">
      <div class="modal-content" style="border-radius: 0px;">
          <div class="modal-header" style="text-align: center;">
            <span id="modalClose" class="close">&times;</span>
            <h3>XYZ</h3>
            <button type="button" class="btn" style="float: right;">Switch to Values</button>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer" style="text-align: center;">
              <p id= "footer-text">
                dsajdsal
              </p>
          </div>
    </div>
    </div>
</body>
</html>

我正在使用 javascript 代码来放置数据，这很好。我在这方面面临的另一个问题，如果我不添加 top: 50%; 底部：0%；左：40%；对：50%；宽度：60%；在 myModal 元素中，模态框位于左上角。我不确定为什么默认情况下它出现在左上角。这就是为什么添加一些 CSS 将其置于中心位置的原因。除此之外，我没有进行任何其他自定义。

这是我面临的两个主要问题。有人可以帮助我吗？任何帮助表示赞赏。

标签： javascripthtmlcsstwitter-bootstrap-3bootstrap-modal

解决方案

推荐阅读