https://squareup.com/jp の上部右側メニューをクリックした時、モーダルウインドウがメニューの下に表示されます。
再び「メニュー」をクリックすると閉じます。
これと同じ動きをさせるにはコードはどう記載すれば良いでしょうか?
完全なコードを回答していただいた方には300ポイントを差し上げます。よろしくお願いいたします。
※html等は[コメント」に記載します。
現行バージョンの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>
手を入れた個所は、以下の通り。
jsFiddle で試してみたのがこちら。
→ http://jsfiddle.net/a_kuma3/XL2J8/3/embedded/result/
http://getbootstrap.com/javascript/#modals
リファレンスと、bootstrap.js の Modal の辺りのコードもちらっと見てみたのですが、data-toggle="modal" を扱う処理が無くなった、という感じではないです。
ただ、それが正しく動いていません。
# 修正するまでには、至りませんでした ><、
なので、自前のスクリプトで、表示・非表示を切り替える Modal#modal('toggle') を呼び出すようにしました。
CSSの:active擬似クラスで実現しているのでは?
:active擬似クラス
http://www.htmq.com/selector/hover.shtml
<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>