bootstrap model is not working

0
votes

I am newer to bootstrap Now i am desingning one website using bootsrap and codeigniter...Here I am using the modal. When i click the modal button data-toggle="modal" the modal form is not getting displayed. Can Any one solve this issue. Thanks in advance.

Here Is my coding

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Meta tag for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Helen Flaghrity Charitable Society</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="<?php echo base_url("assets/css/bootstrap.css");?>" rel="stylesheet">
<link href="<?php echo base_url("assets/css/admin/admin.css");?>" rel="stylesheet">
<link href="<?php echo base_url("assets/css/font-awesome.min.css");?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="position: relative;top:-20px;">
    <div class="col-sm-2" style="background-color: #000;height:700px">
        <ul class="menu sidebar_box" >
            <li><a href="<?php echo base_url();?>Admin_Ctrl/profile">Messages</a></li>
            <li><a href="<?php echo base_url();?>Admin_Ctrl/projects">Add Projects</a></li>
            <li><a href="<?php echo base_url();?>Admin_Ctrl/news">Add News</a></li>
            <li><a href="<?php echo base_url();?>Admin_Ctrl/images">Images</a></li>
            <li><a href="<?php echo base_url();?>Admin_Ctrl/contact">Contact</a></li>
        </ul>
      </div>
<div class="col-sm-10">
<br />
<button type="button" class="btn btn-info btn-sm"  data-toggle="modal" data-target="#addProjects">Add Projects</button>
<br />
<br />
<table id="projects" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Title</th>
                <th>Images</th>
                <th>Messages</th>
                <th>Date</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>Title</th>
                <th>Images</th>
                <th>Messages</th>
                <th>Date</th>
                <th>Delete</th>
            </tr>
        </tfoot>
</table>
</div>
</div>
</div>
<div id="addProjects" class="modal fade"  role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Message</h4>
        </div>
        <div class="modal-body">
          <form enctype="multipart/form-data" action="do_upload" id="submit" method="post">
               <div class="form-group">
                  <label for="projecttitle">Project Title</label>
                  <input type="text" class="form-control" name="projecttitle" id="imagetitle" placeholder="Enter Project Title" required="required">
               </div>
              <div class="control-group form-group">
                   <div class="controls">
                    <label>Upload Photo:</label>
                    <input name="file" type="file" id="file" required>
                    <p class="help-block"></p>
               </div>
               </div>
              <div class="form-group">
                  <label for="projectmessage">Project Message</label>
                  <textarea class="form-control" rows="8" name="projectmessage" id="projectmessage"></textarea> 
              </div>

               <button type="submit" class="btn btn-primary" id="submit">Submit</button>
        </form>
      </div>
      </div>
    </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

</body>
</html>
1
bootstrap-modal

1 Answers

1
votes

The problem is that you included bootstrap.min.js before jquery.min.js.
You have to declare jquery.min.js before bootstrap.min.js

Here's the working code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Meta tag for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Helen Flaghrity Charitable Society</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" style="position: relative;top:-20px;">
    <div class="col-sm-2" style="background-color: #000;height:700px">
        <ul class="menu sidebar_box" >
            <li><a href="">Messages</a></li>
            <li><a href="">Add Projects</a></li>
            <li><a href="">Add News</a></li>
            <li><a href="">Admin_Ctrl/images>Images</a></li>
            <li><a href="">Admin_Ctrl/contact>Contact</a></li>
        </ul>
      </div>
<div class="col-sm-10">
<br />
<button type="button" class="btn btn-info btn-sm"  data-toggle="modal" data-target="#addProjects">Add Projects</button>
<br />
<br />
<table id="projects" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Title</th>
                <th>Images</th>
                <th>Messages</th>
                <th>Date</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>Title</th>
                <th>Images</th>
                <th>Messages</th>
                <th>Date</th>
                <th>Delete</th>
            </tr>
        </tfoot>
</table>
</div>
</div>
</div>
<div id="addProjects" class="modal fade"  role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title">Message</h4>
        </div>
        <div class="modal-body">
          <form enctype="multipart/form-data" action="do_upload" id="submit" method="post">
               <div class="form-group">

                  <input type="text" class="form-control" name="projecttitle" id="imagetitle" placeholder="Enter Project Title" required="required">
               </div>
              <div class="control-group form-group">
                   <div class="controls">
                    <label>Upload Photo:</label>
                    <input name="file" type="file" id="file" required>
                    <p class="help-block"></p>
               </div>
               </div>
              <div class="form-group">
                  <label for="projectmessage">Project Message</label>
                  <textarea class="form-control" rows="8" name="projectmessage" id="projectmessage"></textarea> 
              </div>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
               <button type="submit" class="btn btn-primary" id="sub">Submit</button>
        </form>
      </div>
      </div>
    </div>
</div>



</body>
</html>