简体   繁体   中英

bootstrap modal inside php echo and JQuery .load

I have index.php which calls other test.php using jQuery and loads the contents in one div tag.

But if I put modal in echo of test.php it doesn't work. Modal does not open.

Here is my index.php

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/custom.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="try"></div>
  </body>
  <script>
    function loadUnSolved(){
      $("#try").load("test.php");
    }
    $(document).ready(loadUnSolved());
  </script>
</html>

test.php

<?php
echo '
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="modal12">Otryl</button>

<!-- Modal -->
<div id="modal12" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>text</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>';
?>

I think the problem is in $(document).ready()

Try the following

Index.php :

<script>
    function loadUnSolved(){
        $("#try").load("test.php");
    }

    $(document).ready(function(){loadUnSolved()});
</script>

test.php :(you missed the # symbol)

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal12">Otryl</button>

you need add a closure

$(document).ready(function(){
  loadUnSolved();
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM