Question

坚持创建一个模态窗口并使其在点击时弹出。模态项甚至不在我的浏览器中显示，但它们在JSFid中显示。是浏览器还是代码？还好奇我到底做错了什么，尝试了很多。
HTML：

<section id="modals">
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
    <div>
        <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal clearfix">
                <div class="modal-menu">
                    <div class="modal-menu-item">Video</div>
                    <div class="modal-menu-item">Video</div>
                    <div class="modal-menu-item">Video</div>
                    <div class="modal-menu-item">Video</div>
                    <div class="modal-menu-item">Video</div>
                    <div class="modal-menu-item">Video</div>
                    <div class="modal-menu-item">Video</div>
                </div>

                <div class="modal-content">
                    <div class="modal-header">Header</div>
                    <div class="modal-body">Body</div>
                    <div class="modal-footer">Footer</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

    .modal{
      box-sizing: border-box;
      width: 500px;
      height: 300px;
      background: gray;

    }
    .modal:before{
      box-sizing:inherit;
    }
    .modal-menu,
    .modal-content {
      height: 100%;
      float: left;
    }
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
    .modal-menu {
      width: 20%;
      background: #257562;
      overflow: auto;
    }


    .modal-content {
      width: 80%;
      padding: 50px 0;
      position: relative;
      background: blue;
    }

    .modal-header,
    .modal-footer {
      width: 100%;
      height: 50px;
      position: absolute;
      left: 0;
    }

    .modal-header {
      top: 0;
      background: #E85C74;
    }

    .modal-body {
      height: 100%;
      background: #F9D24F;
    }

    .modal-footer {
      bottom: 0;
      background: #752570;
    }

    .modal-menu-item {
      width: 100%;
      height: 50px;
      margin-bottom: 15px;
      background: #F48829;
    }

    .modal-menu-item:last-of-type {
      margin-bottom: 0;
    }

JS：

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

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

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

Answer 1

如果您使用 Bootstrap 模式，则必须在页面中包含 JQuery 库，并尝试使用以下代码进行隐藏/显示模式::

$('#myModal).modal('show'); // For displaying the modal
$('#myModal').modal('hide'); // For hiding the modal

创建用于显示视频的模态窗口

1 个答案: