如何创建包含图像和链接的对话框？

Question

我是编程新手。 我想知道如何显示如下截图的对话框。 它包括一个图像和链接到另一个网站。

Answer 1

有很多方法可以达到你想要的效果。您可以进入许多Web框架/库，例如Vue.js或react.js。

如果您只是想通过纯HTML + CSS来实现，我建议您查看这些资源：

  

我想知道如何显示如下截图的对话框。

您的包装盒：Creating a modal box

  

它包含图片和链接到另一个网站。

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

关于链接：Click me!

如果你给我一些时间，我甚至可以给你一个例子。

欢迎来到社区＆amp;祝你旅途愉快！

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/