bootstrap4如何設定彈出框
- (*-*)浩原創
- 2019-07-12 10:14:481757瀏覽
彈出框控制項類似於提示框，它在滑鼠點擊到元素後顯示，與提示框不同的是它可以顯示更多的內容。
如何建立彈出框（推薦學習：Bootstrap影片教學）
透過向元素添加 data-toggle="popover" 來建立彈出框。
title屬性的內容為彈出框的標題，data-content 屬性顯示了彈出框的文字內容：
<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
注意: 彈出框要寫jQuery的初始化程式碼裡: 然後在指定的元素上呼叫popover()方法。
data-placement = {left | top | right | bottom | auto} 設定彈出框的顯示位置，支援多種設置，例如data-placement="auto left"時，彈出窗盡可能顯示在左邊,在情況不允許的情況下它才顯示在右邊
以下實例可以在文件的任何地方使用彈出框：
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
完整程式碼:
預設情況下，彈出方塊在再次點擊指定元素後就會關閉，你可以使用 data-trigger="focus" 屬性設定在滑鼠點擊元素外部區域來關閉彈出框。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>弹出框实例</h3> <br>
<a href="#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！
以上是bootstrap4如何設定彈出框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn