將圖像插入模態對話框

Question

我想在 Modal 中插入一個圖像，但我需要使用變量data-image的值，因為它會根據圖像的值而改變。

 <script type="text/javascript"> $('#myModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var title = button.data('title') var overview = button.data('overview') var image = button.data('image') var url = "<img src='https://image.tmdb.org/t/p/w600_and_h900_bestv2/+image+'></img>" var modal = $(this) modal.find('#title').text(title) modal.find('#image').attr('src',url) modal.find('#overview').text(overview) }) </script>

 <a href="#" role="button" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal"> <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <p><div id="image"></div></p> <p><div id="overview"></div></p> </div> </div> </div>

我嘗試使用一些形狀，如 text、val、innerhtml，但沒有奏效。 讓它按照我的需要工作的最佳方法是什么？

Answer 1

您需要使用img元素與div以設置在您的模式中動態顯示您的img和其他內容。

它不工作的原因是DOM內容已准備就緒，並且您正在將樣式應用於div並且它無法asynchronously加載圖像，這就是您看不到任何內容的原因。

我添加了demo數據和其他幾個按鈕，以表明它現在可以使用來自data-attributes.不同data data-attributes.

現場工作演示：

 $('#myModal').on('show.bs.modal', function(event) { var button = $(event.relatedTarget) // Button that triggered the modal var title = button.data('title') var overview = button.data('overview') var image = button.data('image') var modal = $(this) modal.find('#title').text(title) modal.find('#image').attr('src', image) modal.find('#overview').text(overview) })

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <a href="#" role="button" data-id="Foo" data-title="Foo" data-image="https://via.placeholder.com/150" data-overview="Foo" data-toggle="modal" data-target="#myModal">Click Me</a> <br> <a href="#" role="button" data-id="Bar" data-title="Bar" data-image="https://via.placeholder.com/300" data-overview="Bar" data-toggle="modal" data-target="#myModal">Click Me 2</a> <br> <a href="#" role="button" data-id="Example" data-title="Example" data-image="https://via.placeholder.com/350" data-overview="Example" data-toggle="modal" data-target="#myModal">Click Me 3</a> <div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle"> <div id="title"></div> </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p><img src="" id="image" /></p> <p> <div id="overview"></div> </p> </div> </div> </div>

Answer 2

首先，了解什么是模態對話框：它只是一個 div（帶有內容），它的位置使其位於頁面其余部分的頂部，通常伴隨另一個 div 位於其正下方並使其余部分部分變暗頁面，同時防止用戶點擊下方的任何內容。 這兩個 div 開始隱藏，但可以根據用戶活動顯示，然后重新隱藏。

modal詞表示該 div 結構具有焦點 - 在模態對話框關閉之前，用戶無法與頁面的任何其他部分進行交互。 這是通過高度/寬度為 100% 的第二個（覆蓋）div 來實現的，該 div 被定位（通過 z-index）以堆疊在對話框和頁面的其余部分之間。

需要注意的重要一點是，它們只是頁面上存在的普通 div 結構 - 或者隨意添加到頁面中。 這意味着，您可以像更改任何其他 div 的內容一樣輕松地更改模態 div 結構內的內容（文本或 html）。 模態 div 結構根本沒有什么不同。

Bootstraps 模態對話框完全相同，但它們包括一些額外的嘶嘶聲，增加了一些額外的視覺酷感，使它們更容易使用。 除此之外，它們就像自制的模態對話框——就像普通的 div 結構一樣。

為了演示，我們將創建一個超級簡單的自制模態對話框並使用它來執行您的請求。

請注意有關自制模態對話框的以下幾點：

(a) 我們使用position:fixed或position:absolute從通常的 HTML 流中刪除模態 div 結構 - 允許它位於頁面其余部分的頂部。
(b) 我們使用z-index將模態 div 結構定位在頁面其余部分的上方
(c) 我們添加第二個 div（“overlay”），它位於頁面頂部，但位於模態下方。 其目的是使模態對話框下方的頁面變暗，並防止用戶在完成對話框之前單擊頁面上的任何內容。

 $('button').click(function(){ let img = $('#modal').data('image'); $('#modal-content').html(`<img src="${img}" />`); $('#overlay, #modal').fadeIn(); }); $('#modal-close').click(function(){ $('#overlay, #modal').fadeOut(); });

 #overlay{z-index:998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);} #modal{z-index:999;position:fixed;top:15vh;left:25vw;width:50vw;height:30vh;} #modal-close{position:absolute;top:0;right:0;padding:10px;font-size:2em;border:1px solid grey;} #modal-close:hover{color:dodgerblue; border:1px solid dodgerblue;cursor:pointer;} #overlay, #modal{display:none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='overlay'></div> <div id='modal' data-image='http://placekitten.com/400/300'> <div id='modal-close'>X</div> <div id='modal-content'></div> </div> <button>Show Modal</button>

參考：

使用 div 作為帶有 jQ​​uery 的模態對話框的最簡單方法