引导程序模型不起作用 [英] bootstrap model is not working
本文介绍了引导程序模型不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手，现在我要使用bootsrap和codeigniter设计一个网站...在这里，我正在使用模式.当我单击模式按钮时 data-toggle ="modal"不会显示模态形式.谁能解决这个问题.预先感谢.
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.
这是我的编码
<!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">×</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>
推荐答案
问题是您在jquery.min.js之前包含了bootstrap.min.js.
您必须在bootstrap.min.js之前声明jquery.min.js
The problem is that you included bootstrap.min.js before jquery.min.js.
You have to declare jquery.min.js before bootstrap.min.js
这是工作代码:
<!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">×</button>
<button type="submit" class="btn btn-primary" id="sub">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
这篇关于引导程序模型不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
