2 回答

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個贊
您需要使用img元素來反對 adiv
來設(shè)置img
在您的模式中動態(tài)顯示您的內(nèi)容和其他內(nèi)容。
它不起作用的原因是DOM
內(nèi)容已準(zhǔn)備就緒,并且您正在將樣式應(yīng)用于 adiv
并且它無法加載圖像asynchronously
,這就是為什么您看不到任何東西的原因。
我已經(jīng)添加了demo
數(shù)據(jù)和其他幾個按鈕來表明它現(xiàn)在所有的工作都來自不同的data
地方data-attributes.
現(xiàn)場工作演示:
$('#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">×</span>
</button>
</div>
<div class="modal-body">
<p><img src="" id="image" /></p>
<p>
<div id="overview"></div>
</p>
</div>
</div>
</div>

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個贊
首先,了解模態(tài)對話框是什么:它只是一個 div(帶有內(nèi)容),其位置使其位于頁面其余部分的頂部,通常伴隨著另一個 div,直接位于其下方并使其余部分部分變暗頁面,同時防止用戶點(diǎn)擊下面的任何內(nèi)容。這兩個 div 開始隱藏,但可以根據(jù)用戶活動顯示,然后重新隱藏。
這個modal
詞表明這個 div 結(jié)構(gòu)有焦點(diǎn)——在模式對話框關(guān)閉之前,用戶不能與頁面的任何其他部分交互。這是通過高度/寬度為 100% 并定位(通過 z-index)以堆疊在對話框和頁面其余部分之間的第二個(覆蓋)div 來實(shí)現(xiàn)的。
需要注意的重要一點(diǎn)是,它們只是頁面上存在的普通 div 結(jié)構(gòu) - 或者隨意添加到頁面中。這意味著,您可以像更改任何其他 div 的內(nèi)容一樣輕松地更改模態(tài) div 結(jié)構(gòu)內(nèi)的內(nèi)容(文本或 html)。模態(tài) div 結(jié)構(gòu)沒有什么不同。
Bootstraps 模態(tài)對話框完全相同,但它們包含一些額外的嘶嘶聲,增加了一些額外的視覺酷感,并使它們更容易使用。除此之外,它們就像自制的模態(tài)對話框——與普通的 div 結(jié)構(gòu)完全一樣。
為了演示,我們將創(chuàng)建一個超級簡單的自制模式對話框并使用它來執(zhí)行您的請求。
請注意以下有關(guān)自制模式對話框的信息:
(a) 我們使用position:fixed
或position:absolute
從通常的 HTML 流程中刪除模態(tài) div 結(jié)構(gòu)——允許它位于頁面其余部分的頂部。
(b) 我們使用z-index
將模態(tài) div 結(jié)構(gòu)置于頁面其余部分之上
(c) 我們添加第二個 div(“疊加層”),它位于頁面頂部,但位于模態(tài)下方。其目的是使模式對話框下方的頁面變暗,并防止用戶在完成對話框之前單擊頁面上的任何內(nèi)容。
$('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>
添加回答
舉報