html - 在多个位置使用 div

Question

我想知道您是否可以使用一个 div 并在其他地方使用 CSS 弹出它以节省空间并使事情更有条理。我有一组代码，其中很多代码使用相同的行，它是按钮以及弹出窗口中的内容。所以我想把 div 放在一个不错的位置，并使用 CSS 让它在不同的弹出窗口下弹出

<div class = "example">
<ul class = "list">
<li>example</li>
<select name = "example">
<option value = "0">0</option>
</select></li>
<input ...example text...>
</ul>
</div>

所以它位于另一个 div 中，它是一个图像和单击链接时 CSS 弹出的一些文本，它只是一个要为电子商务页面选择的列表，我必须为每个重写它新元素，我为它设置的 CSS 只是设置弹出显示，我有用于弹出操作的 jquery。而不是每次我想要它时都重写上面所说的代码，并使用 CSS 或 java 让它与所有弹出窗口一起弹出

Answer 1

您可以为弹出窗口使用 bootstrap 和 modal，因为您可以更轻松地使用它们，并且可以使用 modals 做各种事情。

而且 Bootstrap 令人难以置信易于使用

Bootstrap Modal example

 <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

 <!-- Modal -->
      <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

<!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
          <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
     </div>

这是来自 W3 Schools 的示例- 我知道它看起来很多，但 Bootstrap 会改变你的网页设计世界 :)