CodeIgniter 3 and Bootstrap 3 Modal

Question

I have a view and with this code in the head.

 $(document).ready(function() {
     $('#myModal').modal('show');
}

and the following HTML:

 <div id="myModal" class="modal hide" role="dialog">
 </div>

The controller has:

 class Home extends CI_Controller {

    public function __construct() {
       parent::__construct();
       $this->load->library('session');

    }

    public function index() {
       $this->load->view('home');
    }

 }

When I run the view the modal does not appear. I am new CodeIgniter and do not understand why the modal does not work by simply running the index.php/home .

I am loading the bootstrap.js file in the footer in the correct order with jQuery. I have a Bootstrap alert working.

Is there a Library or Helper that has to be loaded in the controller?

Answer 1

I do not see any html or body tags on your view. Also not really to do any thing with codeigniter it self.

Here is script for auto show bootstrap on page load

<script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>

And The View

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>
<body>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</html>

CodeIgniter 3 and Bootstrap 3 Modal

Question

1 answers

solution1
0 ACCPTED 2015-06-16 03:23:01

CodeIgniter 3 and Bootstrap 3 Modal

Question

1 answers

solution1 0 ACCPTED 2015-06-16 03:23:01

solution1
0 ACCPTED 2015-06-16 03:23:01