Bootstrap 3 Modal Dialog Does Not Work

I want to load the HTML that was issued and display it beautifully on the Modal of Bootstrap, but the Modal dialog of Bootstrap 3 doesn't work.What's wrong? Thank you for your cooperation!!

<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='button btn-default'>DattonShutMutting='tottenShutting>ShuttingMuttingMutting

        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(){
    // View in JavaScript
    $('#staticModalButton').on('click', function(){
      $('#staticModal').modal();
    });
  });
  </script>
</body>
</html>

javascript cakephp twitter-bootstrap

2022-09-30 14:35

2 Answers

First, Bootstrap's Modal feature does not automatically replace window.open.

$('#staticModal') .modal();

This statement shows the dialog element #staticModal.The HTML written in the question does not appear to correspond to #staticModal, so pressing the button will cause nothing to happen.

So,

Dialog elements <div class="modal"> etc. are required

You can ignore English and copy HTML from official help, and you will find many articles in Japanese.

For example, http://codezine.jp/article/detail/8270.
Requires another effort to load external HTML

The Bootstrap 3.x Modal has the ability to load external HTML, although it is already deprecated.However, the structure of this is also fixed, so I think it is necessary to change the external HTML side accordingly.

Remote Modal-Katsumi Kokuzawa's Blog
in Bootstrap
Or you can load it yourself in jQuery, etc. <iframe> or expand HTML in $().load() etc.

Requires dialog element <div class="modal"> etc.

You can ignore English and copy HTML from official help, and you will find many articles in Japanese.

For example, http://codezine.jp/article/detail/8270.

Loading external HTML requires another effort

The Bootstrap 3.x Modal has the ability to load external HTML, although it is already deprecated.However, the structure of this is also fixed, so I think it is necessary to change the external HTML side accordingly.

Remote Modal-Katsumi Kokuzawa's Blog

in Bootstrap

Or you can load it yourself in jQuery, etc. <iframe> or expand HTML in $().load() etc.

First of all, try to understand the above two points and achieve them with static HTML without PHP.

2022-09-30 14:35

First, have you verified that static HTML works properly?

cModal ダルJavaScriptra Bootstrap3 Japanese Reference
http://bootstrap3.cyberlab.info/javascript/modals-javascript.html

Also, have you checked the HTML issued by PHP in the browser source display?
Also, I think you can see the problem by checking the difference compared to the one that worked correctly.

2022-09-30 14:35

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656