

発行されたHTMLを読み込んでBootstrapのModalで美しく表示したいのですが、Bootstrap3のModalダイアログが動きません。どこが間違っていますか？
是非宜しくお願いします！！

[code]

    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
    </head>
    <body>
      <table>
      <thead>
        <tr><th>Show</th><tr>
      </thead>
      <tbody>
    <?php
    
        foreach($result as $show){
            echo "<tr>";
            echo "<td><a href=javascript:window.open('".
                $this->webroot.'makefile/filename_'.$val['number']['id'].".html','','width=1000,height=800,'); return false ;><button type='button'  class='btn btn-default' id='staticModalButton'>Show details</button></a></td>";
    
            echo "</tr>";
    
       }
    
    
    ?>
        </tbody>
    </table>
    
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
      <script>
      $(function() {
        // JavaScript で表示
        $('#staticModalButton').on('click', function() {
          $('#staticModal').modal();
        });
      });
      </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-11-10T04:58:51.330
18605
2015-11-18T09:27:23.203
2015-11-10T05:39:27.620
7290
9013
question
javascript cakephp twitter-bootstrap
Bootstrap3のModalダイアログが動きません


先ず静的なHTMLで正しく動作することを確認してみましたか？

JavaScriptで呼び出す ≪ モーダル ≪ JavaScript ≪ Bootstrap3日本語リファレンス  
<http://bootstrap3.cyberlab.info/javascript/modals-javascript.html>

また、PHPで発行したHTMLをブラウザのソース表示で確認してみましたか？  
そして正しく動作したものと比べて差異を確認することで問題点が見えてくるかと思います。


CC BY-SA 3.0
2015-11-18T08:11:14.087
18977
2015-11-18T08:11:14.087
13314
18605
answer


まず、Bootstrap の Modal 機能には `window.open` を自動的に置き換える機能はありません。

[code]

    $('#staticModal').modal();
    
[/code]

この記述は、ダイアログとなる要素 `#staticModal` を表示するというものです。質問に書かれたHTMLには `#staticModal`
に該当する要素がないようですから、ボタンを押しても何も起きないでしょう。

ということで、

  * ダイアログとなる要素 `<div class="modal">` などが必要です

英語は無視して[公式のヘルプ](http://getbootstrap.com/javascript/#live-
demo)からHTMLをコピペしてみてもいいですし、日本語の記事も多数見つかるかと思います。

例えば <http://codezine.jp/article/detail/8270> とか。

  * 外部HTMLの読み込みにはもうひと手間必要です

既に非推奨になってはいるものの、 Bootstrap 3.x の Modal
には外部HTMLを読み込む機能があります。ただしこれも構造が決まっていますから、それに合わせて外部HTML側にも手を加える必要があると思います。

参考 [BootstrapのRemote Modal - Katsumi Kokuzawa's
Blog](http://kokuzawa.github.io/blog/2013/11/13/bootstrapfalseremote-modal/)

もしくはjQueryなどで自分で読み込みます。 `<iframe>` を埋め込むか、`$().load()` などでHTMLを展開するか、等々。

とりあえず上記二点を理解し、PHP抜きの静的HTMLで実現してみてください。


CC BY-SA 3.0
2015-11-18T09:27:23.203
18991
2015-11-18T09:27:23.203
8000
18605
answer