Bootstrapの「モーダル」について質問です。
https://squareup.com/jp の上部右側メニューをクリックした時、モーダルウインドウがメニューの下に表示されます。
再び「メニュー」をクリックすると閉じます。
これと同じ動きをさせるにはコードはどう記載すれば良いでしょうか？
完全なコードを回答していただいた方には300ポイントを差し上げます。よろしくお願いいたします。
※html等は[コメント」に記載します。
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
ベストアンサー
-
a-kuma3
満足500pt
現行バージョンのBootstrap3( http://getbootstrap.com/ )で動作しないことがわかりました。
Bootstrap 3.0.2 でやってみました。
<html> <head> <!-- ★ Bootstrap のスタイル --> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <style> #header .modal-dialog { padding: 0; } #header .modal-content { background-color: #3098bb; border-radius: 0; color: #fff; } #header .modal-content a { color: #fff; } #header .modal, .modal-backdrop { top: 50px; } @media screen and (min-width: 768px) { #header .modal-dialog { width: auto; } } /* ★メニューの場所を調整 */ #menu { position: absolute; top: 0; } </style> </head> <body> <header id="header"> <!-- ★ data-toggle="modal" を外しました --> <!-- <a class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal" id="menu">メニュー</a> --> <a class="btn btn-primary btn-lg" data-target="#myModal" id="menu">メニュー</a> <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-body"> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> <!-- ★ モーダルを消すボタンもつけてみた --> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </header> <!-- ★ Bootstrap のスクリプト --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> <script> //「メニュー」をクリックした時にモーダルウインドウを表示。再び「メニュー」をクリックすると閉じる。 $(function() { $('#menu').click(function() { // ★ modal メソッドに 'toggle' を指定します $('#myModal').modal('toggle'); }); }); </script> </body> </html>
手を入れた個所は、以下の通り。
- Bootstrap の css と javascript を取り込み
URL は リファレンスのページに向いてます。自分で試すときは、導入した位置に向けてください。 - 「メニュー」から data-toggle="modal" を外した
- 自前の javascript を修正
書いている位置も後ろにずらしてます。 - 「メニュー」の位置をずらす
- モーダルの中に「Close」も入れてみた（本質と関係なし）
jsFiddle で試してみたのがこちら。
→ http://jsfiddle.net/a_kuma3/XL2J8/3/embedded/result/
http://getbootstrap.com/javascript/#modals
リファレンスと、bootstrap.js の Modal の辺りのコードもちらっと見てみたのですが、data-toggle="modal" を扱う処理が無くなった、という感じではないです。
ただ、それが正しく動いていません。
＃ 修正するまでには、至りませんでした ＞＜、
なので、自前のスクリプトで、表示・非表示を切り替える Modal#modal('toggle') を呼び出すようにしました。 - Bootstrap の css と javascript を取り込み
a-kuma3その他の回答
-
cawbridge2013
0pt
CSSの:active擬似クラスで実現しているのでは？
:active擬似クラス
http://www.htmq.com/selector/hover.shtml -
- その他の回答を読む
この質問へのコメント
質問の情報
- 登録日時
- 2013-12-01 06:12:41
- 終了日時
- 2013-12-03 23:05:08
- 回答条件
- 1人5回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
すぐお金になる働き方で求人以外にありますか？業界人でなくても 需要あれば働けるという日本人の多いとこ…
ao874530
1
-
民法施行法（明治三十一年法律第十一号）という古い法令の第6条: 契印について⇒民法施行法： 第六条 私署…
匿名質問者1
1
-
無料で、食べ物をもらったことありますか？たとえば、コンビニ、スーパーなど。…ao8745301
-
宅地建物取引士が集まる店はありますか？ao8745301
-
民間の求人で、即採用の求人は 未経験の職種でみつかりましたか？ao8745301
<head>
<style>
#header .modal-dialog {
padding: 0;
}
#header .modal-content {
background-color: #3098bb;
border-radius: 0;
color: #fff;
}
#header .modal-content a {
color: #fff;
}
#header .modal, .modal-backdrop {
top: 50px;
}
@media screen and (min-width: 768px) {
#header .modal-dialog {
width: auto;
}
}
</style>
<script>
//「メニュー」をクリックした時にモーダルウインドウを表示。再び「メニュー」をクリックすると閉じる。
$(function() {
$('menu').click(function() {
$('#myModal').modal('hide');
});
});
</script>
</head>
<body>
<header id="header">
<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="menu">メニュー</a>
<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-body">
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
</body>
</html>