亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

將圖像插入模態對話框

將圖像插入模態對話框

元芳怎么了 2023-02-17 16:49:20
我想在 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>我嘗試使用一些形狀，如文本、val、innerhtml，但沒有用。讓它按照我的需要工作的最好方法是什么？
查看完整描述

2 回答

?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

您需要使用img元素來反對 adiv來設置img在您的模式中動態顯示您的內容和其他內容。

它不起作用的原因是DOM內容已準備就緒，并且您正在將樣式應用于 adiv并且它無法加載圖像asynchronously，這就是為什么您看不到任何東西的原因。

我已經添加了demo數據和其他幾個按鈕來表明它現在所有的工作都來自不同的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>


查看完整回答
反對 回復 2023-02-17
?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

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

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

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

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

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

請注意以下有關自制模式對話框的信息：

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

$('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>


查看完整回答
反對 回復 2023-02-17
  • 2 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號