Is the dialog based on bootstrap?

Those who have used JQuery UI should know that it has a dialog pop-up box component with rich functions.

Similar to jQuery UI's dialog, Bootstrap also has a built-in pop-up box component. (Recommended learning: Bootstrap video tutorial)

Open the bootstrap document http://v3.bootcss.com/components/ and you can see that its dialog is directly embedded into bootstrap. js and bootstrap.css, that is to say, as long as we introduce the bootstrap file, we can directly use its dialog component. Isn't it very convenient?

In this article, we will introduce the use of bootstrap dialog based on the new editing function. Without further ado, let’s look directly at how to use it.

Display through html code

<!-- Button trigger modal 弹出框的触发器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal 弹出框的结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

This method is simple and intuitive; but it will increase the 'weight' of html and is not flexible enough. It is not recommended for large-scale use Use

to display

through js. The simplest implementation method:

BootstrapDialog.show({
  message: 'Hi Apple!'
});

For more technical articles related to Bootstrap, please visit Bootstrap Learn in the tutorial column!

The above is the detailed content of Is the dialog based on bootstrap?. For more information, please follow other related articles on the PHP Chinese website!