2017-02-01 4 views
0

Ich bin neuer Bootstrap Jetzt bin ich Desingning eine Website mit Bootsrap und Codeigniter ... Hier verwende ich das Modal. Wenn ich auf die modale Schaltfläche klicke data-toggle = "modal" wird das modale Formular nicht angezeigt. Kann jemand dieses Problem lösen. Danke im Voraus.Bootstrap-Modell funktioniert nicht

Hier ist meine Codierung

<!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> 

Antwort

1

Das Problem ist, dass Sie bootstrap.min.js vor jquery.min.js enthalten.
Sie müssen erklären jquery.min.js vor bootstrap.min.js

Hier ist der Arbeitscode:

<!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> 
+0

Dank ... Seine Arbeits ... –

Verwandte Themen