[英]Bootstrap 4: Can't close modals when using more than one
我目前正在嘗試在 Bootstrap 4 中設置一個畫廊。現在我想讓圖像可點擊並打開它的更大版本。 這工作正常,但是一旦我使用多個腳本,它就不會讓我再關閉模態。
到目前為止,這是我的代碼:
<div id="Modal01" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="col-md-3">
<div class="thumbnail">
<img id="TheImage" src="/img/galleryimg1.png">
</div>
</div>
JS:
<script>
var modal = document.getElementById('Modal01');
var img = document.getElementById('TheImage');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
希望你們能幫幫我。
實現該畫廊功能的最簡單方法是使用 Bootstrap 提供的 javascript 庫。 這樣,您的標記和腳本就可以像下面的示例一樣簡單。 您也可以在 Bootstrap 文檔的Varying modal content部分下閱讀有關此設置的更多信息。
$('#gallery-modal').on('show.bs.modal', function(event) { var thumbnail = event.relatedTarget, title = thumbnail.alt, src = thumbnail.src, modal = $(this); modal.find('.modal-title').text(title); modal.find('.img-placeholder').attr('src', src); });
<div id="gallery" class="container"> <div class="row"> <div class="col-4"> <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/ff0000/ffffff?text=Image+1" alt="Image 1"/> </div> <div class="col-4"> <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/00ff00/ffffff?text=Image+2" alt="Image 2"/> </div> <div class="col-4"> <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/0000ff/ffffff?text=Image+3" alt="Image 3"/> </div> </div> </div> <div id="gallery-modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <img class="img-placeholder img-fluid" src=""/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
在不太可能的情況下,您想完全忽略bootstrap.js
和 jQuery 提供的功能,並且想提出純 javascript 自定義解決方案,您絕對不應該對每個縮略圖重復相同的代碼。 我假設您正在嘗試這樣做,並且當您在代碼中使用全局變量時,它們會被覆蓋。 相反,您應該處理模態功能並以更通用的方式附加事件處理程序。 我不建議采用這種方法,但只是為了這個想法,這里是一個純 javascript 的例子。
// Basic Modal object var Modal = function() { var modal = document.getElementById('gallery-modal'), title = modal.querySelector('.modal-title'), img = modal.querySelector('.img-placeholder'), closeBtns = modal.querySelectorAll('[data-dismiss="modal"]'), bodyClassList = document.querySelector('body').classList; function show(title, src) { title.innerText = title; img.src = src; bodyClassList.add('modal-open'); modal.style.display = 'block'; } function hide() { bodyClassList.remove('modal-open'); modal.style.display = 'none'; title.innerText = ''; img.src = ''; } // Handling `click` on "close" buttons [...closeBtns].forEach(closeBtn => { closeBtn.addEventListener('click', hide); }); return { show : show, }; }(); // Handling `click` events on thumbnails [...document.querySelectorAll('#gallery .img-thumbnail')].forEach(thumbnail => { thumbnail.addEventListener('click', function() { // `this` is the <img> clicked var title = this.alt, src = this.src; // Modal is the global Modal object Modal.show(title, src); }); });
<div id="gallery" class="container"> <div class="row"> <div class="col-4"> <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/ff0000/ffffff?text=Image+1" alt="Image 1"/> </div> <div class="col-4"> <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/00ff00/ffffff?text=Image+2" alt="Image 2"/> </div> <div class="col-4"> <img class="img-fluid img-thumbnail" data-toggle="modal" data-target="#gallery-modal" src="http://via.placeholder.com/800x450/0000ff/ffffff?text=Image+3" alt="Image 3"/> </div> </div> </div> <div id="gallery-modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <img class="img-placeholder img-fluid" src=""/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
目前與
<div class="modal-backdrop fade show"></div>
之后你可以嘗試使用css
body.modal-open .modal{
z-index: 0;
}
body.modal-open .modal.fade.show{
z-index: 1041;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.