ホームページ >ウェブフロントエンド >htmlチュートリアル >BootStrap学習(6)_modal box_html/css_WEB-ITnose
BootStrap学習(6)_modal box_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 11:33:501044ブラウズ
1. モーダルボックス
モーダルは親フォームをカバーするサブフォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは情報や対話などを提供します。
この機能のみを使用する場合は、BootStrapにmodal.js
を導入するだけです1. 使用方法:
モーダルボックス(Modal)プラグインの非表示コンテンツを切り替えることができます:
$('#identifier').modal(options)rreeeefect：
コード説明：
モーダルウィンドウを使用するには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しています。 上記のコードを注意深く見ると、bb9345e55eb71822850ff156dfde57c8 タグ内で、
data-target="#myModal"次の表に、モーダル ボックスで使用されるイベントを示します。これらのイベントは関数のフックとして使用できます。 Event
Description
Instance
| show.bs.modal | show メソッドの呼び出し後に起動されます。 | <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title></title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body style="margin-top:20px;margin-left:20px;"> <h3>创建模态框（Modal）</h3><!-- 按钮触发模态框 --> <table class="table table-bordered"> <thead> <tr> <th>书名</th> <th>单价</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>三国演义</td> <td>50</td> <td ><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 修改</button></td> </tr> </tbody></table><!-- 模态框（Modal） --> <form ><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> <table class="table table-condensed"> <tr><td>书名:<input type="text" value="三国演义"/>价格:<input type="text" value="50" /></td></tr> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div> <!-- /.modal-content --></div><!-- /.modal --> </div> </form></body></html> | |||||||||||||||
| shown.bs.modal | モーダルがユーザーに表示されると発生します (CSS トランジション効果が完了するまで待機します)。 | $('#identifier').on('show.bs.modal', function () { // 执行一些动作...}) | |||||||||||||||
| hide.bs.modal | Hide インスタンス メソッドが呼び出されたときに起動されます。 | $('#identifier').on('shown.bs.modal', function () { // 执行一些动作...}) | |||||||||||||||
| hidden.bs.modal | モーダルがユーザーから完全に非表示になったときに起動されます。 | りー | |||||||||||||||
| 方法 | 描述 | 实例 |
| Options: .tooltip(options) | 向元素集合附加提示工具句柄。 | $().tooltip(options) |
| Toggle: .tooltip('toggle') | 切换显示/隐藏元素的提示工具。 | $('#element').tooltip('toggle') |
| Show: .tooltip('show') | 显示元素的提示工具。 | $('#element').tooltip('show') |
| Hide: .tooltip('hide') | 隐藏元素的提示工具。 | $('#element').tooltip('hide') |
| Destroy: .tooltip('destroy') | 隐藏并销毁元素的提示工具。 | $('#element').tooltip('destroy') |
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head> <body ><div style="padding: 100px 100px 10px;"> <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show </a><br /><br /> <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide </a><br /><br /> <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy </a><br /><br /> <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle </a><br /><br /> <p class="tooltip-options" > <a href="#" data-toggle="tooltip" title="'am Header2">Tooltip 方法 options </a> </p> <script> $(function () { $('.tooltip-show').tooltip('show'); }); $(function () { $('.tooltip-hide').tooltip('hide'); }); $(function () { $('.tooltip-destroy').tooltip('destroy'); }); $(function () { $('.tooltip-toggle').tooltip('toggle'); }); $(function () { $(".tooltip-options a").tooltip({ html: true }); }); </script></div></body></html> 效果:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。