CodeIgniter 3 and Bootstrap 3 Modal

Question

CodeIgniter 3 and Bootstrap 3 Modal

3.8k Views Asked by dutchlab At 19 October 2024 at 20:00

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?

Original Q&A

There are 1 best solutions below

**AudioBubble** · Accepted Answer

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in MODAL-DIALOG

Related Questions in CODEIGNITER-3

Trending Questions

Popular # Hahtags

Popular Questions