How to set up pop-up box in bootstrap4

The pop-up box control is similar to a prompt box. It is displayed after the mouse clicks on an element. The difference from the prompt box is that it can display more content.

How to create a pop-up box(Recommended learning: Bootstrap video tutorial)

By Add data-toggle="popover" to the element to create a popover.

The content of the title attribute is the title of the pop-up box, and the data-content attribute displays the text content of the pop-up box:

<a>多次点我</a>

Note: The pop-up box needs to be written in the jQuery initialization code: Then specify Call the popover() method on the element.

data-placement = {left | top | right | bottom | auto} Set the display position of the pop-up box and support multiple settings. For example, when data-placement="auto left", the pop-up window will be displayed. It may be displayed on the left, but it will be displayed on the right if the situation does not allow it.

The following example can use the pop-up box anywhere in the document:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

Complete code:

By default, the pop-up box will close after clicking the specified element again. You can use the data-trigger="focus" attribute to set it when the mouse clicks outside the element. area to close the popup.

nbsp;html>


  <title>Bootstrap 实例</title>
  <meta>
  <meta>
  <link>
  <script></script>
  <script></script>
  <script></script>



<div>
  <h3 id="弹出框实例">弹出框实例</h3> <br>
  <a>点我</a>
</div>

<script>
$(document).ready(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();   
});
</script>

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to set up pop-up box in bootstrap4. For more information, please follow other related articles on the PHP Chinese website!