ホームページ > 記事 > ウェブフロントエンド > bootstrap4でポップアップボックスを設定する方法
bootstrap4でポップアップボックスを設定する方法
- (*-*)浩オリジナル
- 2019-07-12 10:14:481753ブラウズ
ポップアップ ボックス コントロールはプロンプト ボックスに似ています。マウスで要素をクリックした後に表示されます。プロンプト ボックスとの違いは、より多くのコンテンツを表示できることです。
#ポップアップ ボックスの作成方法(推奨学習: Bootstrap ビデオ チュートリアル)
By ポップオーバーを作成するには、要素に data-toggle="popover" を追加します。 title 属性の内容はポップアップ ボックスのタイトルであり、data-content 属性はポップアップ ボックスのテキスト内容を表示します。<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>注: ポップ-up ボックスは、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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。