如何使用卡在引导程序中创建弹出按钮？

问题描述

我正在努力创建一个如下图所示的仪表板卡。

我要实现的目标是找到一种创建仪表板的方法，该仪表板将加载此模式表单，以便它可以显示为带有发布按钮，图像文件夹等的卡片。

这是我尝试过的：

<center>
  <div class="ic-Dashboard-header_layout">
    <h1 class="ic-Dashboard-header_title">    
      <span class="hidden-phone">Dashboard</span>    
    </h1>
    <!---Some extra button here-->  
  </div>
  <!--Dashboard card here-->  
  <div class="main">
    <!--cards -->  
    <div class="card">
      <div class="image">    
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">    
      </div>
      <div class="title">
        <h1>    
          Write title Here    
        </h1>
      </div>
      <div class="des">
        <p>You can Add Desccription Here...</p>
        <button>Read More...</button>    
      </div>
    </div>
  </div>
  <!--cards -->    
  <!--Content page header-->  
  <section class="content-header-fluid">    
  </section>
</center> 

解决方法

您是否尝试过引导模态？ 它的作用与“卡片”相同，但在您单击按钮时显示的弹出窗口中。 检查以下指向直接文档的链接： https://getbootstrap.com/docs/4.0/components/modal/

这是一个完整的例子

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>