Question

我正在编写一个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以使其居中。除此之外，我没有进行任何其他自定义。

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

通过Chrome扩展程序呈现时，Bootstrap Modal无法正确显示

0 个答案: