id:icta
ポイントあり500ptベストアンサーあり
コンピュータウェブ制作

Bootstrapの「モーダル」について質問です。

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

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2013/12/03 23:05:08
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.3

回答回数4973ベストアンサー獲得回数2154

ポイント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') を呼び出すようにしました。

id:icta

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

2013/12/03 23:04:27
id:a-kuma3

ぼくも、良い勉強をさせてもらいました。

Bootstrap 3.0.x が出て、あまり日が経ってないようなので、そのうち修正されるかもしれませんね。

2013/12/03 23:28:35

その他の回答（2件）

id:cawbridge2013 No.1

回答回数174ベストアンサー獲得回数17

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

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

id:icta

ご回答ありがとうございます。
active擬似クラスでどうやって解決すればよいか勉強不足でよくわかりません。
bootstrapではモーダルを開いたときに<body>にclass="modal-open"、</body>直上に

が追加されます。
閉じるとこれらは取り除かれます。
これは▼以下で実行可能です。
$(function() {
$('menu').click(function() {
$('#myModal').modal('hide');
});
});
モーダルを開閉するは▼以下のとおりです。
開く：メニュー
閉じる：Close

考え付いたのは▼次の2つです。
・「メニュー」がクリックされた時にメニューをメニューに書き換える。
・<body>にclass="modal-open"があるとき(activeの状態)ではモーダルを開き、再度クリックしたときは<body>からclass="modal-open"と
を取り除く。

しかしこれをどうやってコードを記載すればよいかよくわかりません。
もう少し詳しく教えていただければ大変助かります。

2013/12/01 16:40:43
id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

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>

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

  • Bootstrap の css と javascript を取り込み
    URL は デモページに向いてます。自分で試すときは、導入した位置に向けてください。
  • 自前の javascript をコメントアウト
  • 「メニュー」の位置をずらす

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


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

id:icta

ご回答ありがとうございます。デモはまさに実装したかったそのものでした。
しかしながら自身のページに導入すると動作しないため、検証してみました。
前バージョンのBootstrap2( http://getbootstrap.com/2.3.2/ )では動作確認できました。
現行バージョンのBootstrap3( http://getbootstrap.com/ )で動作しないことがわかりました。
▼こちらがBootstrap3のjsです。
http://getbootstrap.com/dist/js/bootstrap.js

何かが動作を阻害しているのだと思われますが、力不足で特定できませんでした。
もしかしたら根本的なところで思い違いをしているのかもしれません。
何か原因がわかりましたら教えていただければ幸いです。

2013/12/03 04:07:30
id:a-kuma3

No.3 に新しく回答を書きました。
そちらを確認してください。

2013/12/03 11:59:29
id:a-kuma3 No.3

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント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') を呼び出すようにしました。

id:icta

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

2013/12/03 23:04:27
id:a-kuma3

ぼくも、良い勉強をさせてもらいました。

Bootstrap 3.0.x が出て、あまり日が経ってないようなので、そのうち修正されるかもしれませんね。

2013/12/03 23:28:35

コメント（1件)

  • id:icta
    icta 2013/12/01 06:20:03
    <html>
    <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>

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ