如何創建包含圖片和鏈接的對話框？

Question

我是編程新手。 我想知道如何顯示如下截圖的對話框。它包括一個圖像和鏈接到另一個網站。

Answer 1

有很多方法可以實現你想要的。您可以進入許多Web框架/庫，例如Vue.js或react.js。

如果你只是想通過普通的HTML + CSS來做到這一點，我會建議你檢出這些ressources：

我想知道如何顯示像下面的截圖的對話框。

針對你的機器：Creating a modal box

它包括圖像和鏈接到另一個網站。

添加圖片：Here's how to add them!

關於鏈接：Click me!

如果你給我一段時間，我甚至可以時尚你一個例子。

歡迎來到社區&祝你旅途愉快！

Answer 2

只是包裝您的IMG錨標籤內。見參考https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image

Answer 3

有很多方法可以做到這一點（手工製作或流行的現成解決方案）。

但是，如果你想要做它自己沒有具體的解決方案，有幾個步驟，可以很容易：

• 爲您的對話框，其中包括所有的元素創建HTML代碼;
• 爲您的對話框創建CSS。對話框將默認隱藏;
• 創建JavaScript代碼，以便您可以管理對話框的行爲。

例如，我們有這個對話框HTML：

<!-- When u click on this element dialog box appears --> 
    <a id="open-dialog" href="#">Show dialog</a> 
<!-- Dialog box --> 
    <div id="dialog-box"> 
    <!-- Dialog box close button --> 
    <span id="close-dialog">x</span> 
    <!-- Dialog box content --> 
    <p>Hello im dialog box</p> 
    </div> 

而且我們有CSS代碼爲我們的對話框：

/* Dialog box container styles */  
#dialog-box{ 
     display:none;/* Dialog box hidden by deafault */ 
     position:absolute; 
     border:1px solid #333; 
     padding:10px; 
     width:200px; height:100px; 
     top:30%; left:30%; 
    } 

/* Dialog box close button styles */ 
    #close-dialog{ 
     display:inline-block; 
     font-weight:bold; 
     float:right; 
     margin-right:10px; 
     font-size:18px; 
     width:10px; height:10px; 
     cursor:pointer; 
    } 

接下來我們可以編寫JavaScript代碼，它會顯示和隱藏我們的對話框（使用https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js的jQuery庫）：

$(function(){ 

/* Bind onlick event handler for element with "open-dialog" id - our 
    link element to open dialog box */ 
$('#open-dialog').on('click', function(e){ 
    e.preventDefault(); 
    $('#dialog-box').show(); 
}); 

/* Bind onlick event handler for element with "close-dialog" id - our 
    close dialog box button */ 
$('#dialog-box').on('click', '#close-dialog', function(e){ 
    e.preventDefault(); 
    $('#dialog-box').hide(); 
}); 

}); 

您可以在這裏看到工作示例https://jsfiddle.net/qeenegmn/