人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Bootstrapの「モーダル」について質問です。
https://squareup.com/jp の上部右側メニューをクリックした時、モーダルウインドウがメニューの下に表示されます。
再び「メニュー」をクリックすると閉じます。
これと同じ動きをさせるにはコードはどう記載すれば良いでしょうか?
完全なコードを回答していただいた方には300ポイントを差し上げます。よろしくお願いいたします。
※html等は[コメント」に記載します。

●質問者: icta
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● cawbridge2013
●0ポイント

CSSの:active擬似クラスで実現しているのでは?

:active擬似クラス
http://www.htmq.com/selector/hover.shtml


ictaさんのコメント
ご回答ありがとうございます。 active擬似クラスでどうやって解決すればよいか勉強不足でよくわかりません。 bootstrapではモーダルを開いたときに<body>にclass="modal-open"、</body>直上に<div class="modal-backdrop fade in"></div>が追加されます。 閉じるとこれらは取り除かれます。 これは▼以下で実行可能です。 $(function() { $('menu').click(function() { $('#myModal').modal('hide'); }); }); モーダルを開閉する<a>は▼以下のとおりです。 開く:<a class="btn btn-default" data-toggle="modal" data-target="#myModal">メニュー</a> 閉じる:<a class="btn btn-default" data-dismiss="modal">Close</a> 考え付いたのは▼次の2つです。 ・「メニュー」がクリックされた時に<a class="btn btn-default" data-toggle="modal" data-target="#myModal">メニュー</a>を<a class="btn btn-default" data-dismiss="modal">メニュー</a>に書き換える。 ・<body>にclass="modal-open"があるとき(activeの状態)ではモーダルを開き、再度クリックしたときは<body>からclass="modal-open"と<div class="modal-backdrop fade in"></div>を取り除く。 しかしこれをどうやってコードを記載すればよいかよくわかりません。 もう少し詳しく教えていただければ大変助かります。

2 ● a-kuma3
●0ポイント

Bootstrap はあまり詳しくないのですけれど、適切な属性値がついていれば自分で javascript のコードを書かなくてもモーダルの表示と消去ができると思うのです。
# 質問の意図が分かってないのかも...

コメントのコードにちょっと手を入れたものがこちら。

<html>
<head>

<!-- ★ Bootstrap のスタイル -->
<link href="http://php-fan.org/sample_code_demo/common/css/bootstrap.css" rel="stylesheet">
<link href="http://php-fan.org/sample_code_demo/common/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://php-fan.org/sample_code_demo/common/css/layout.css" rel="stylesheet">
<link href="http://php-fan.org/sample_code_demo/common/css/prettify.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>
<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>

<!-- ★ Bootstrap のスクリプト -->
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/prettify.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-transition.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-alert.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-modal.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-dropdown.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-scrollspy.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-tab.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-tooltip.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-popover.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-button.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-collapse.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-carousel.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/bootstrap-typeahead.js"></script>
 <script type="text/javascript" src="http://php-fan.org/sample_code_demo/common/js/application.js"></script>

</body>
</html>

手を入れた個所は、以下の通り。

jsFiddle で試してみたのがこちら。
http://jsfiddle.net/a_kuma3/XL2J8/2/embedded/result/


質問で意図していることと違ってたら、ごめんなさい。


ictaさんのコメント
ご回答ありがとうございます。デモはまさに実装したかったそのものでした。 しかしながら自身のページに導入すると動作しないため、検証してみました。 前バージョンのBootstrap2( http://getbootstrap.com/2.3.2/ )では動作確認できました。 現行バージョンのBootstrap3( http://getbootstrap.com/ )で動作しないことがわかりました。 ▼こちらがBootstrap3のjsです。 http://getbootstrap.com/dist/js/bootstrap.js 何かが動作を阻害しているのだと思われますが、力不足で特定できませんでした。 もしかしたら根本的なところで思い違いをしているのかもしれません。 何か原因がわかりましたら教えていただければ幸いです。

a-kuma3さんのコメント
No.3 に新しく回答を書きました。 そちらを確認してください。

3 ● a-kuma3
●500ポイント ベストアンサー

現行バージョンの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') を呼び出すようにしました。


ictaさんのコメント
ご回答ありがとうございます。 希望通りの動作を確認できました。 何日かけても解決できなかったことが終了し大変うれしいです。 心より感謝いたします。

a-kuma3さんのコメント
ぼくも、良い勉強をさせてもらいました。 Bootstrap 3.0.x が出て、あまり日が経ってないようなので、そのうち修正されるかもしれませんね。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ