引導模態不起作用？
[英]bootstrap modal is not working?
問題描述
我在css中非常貧窮。在我的項目中，我需要一個彈出窗口。這就是為什么我在網上搜索並發現/知道引導模態的原因。 並嘗試使用它。但是我面臨着問題。 在stackoverflow中已經有很多問題。但是我的問題是不同的。這就是為什么我要再次詢問？
問題=>
出現在方框上方，然后在沒有我的指示的情況下又消失了/沒有留下任何東西。
我的html =>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
和我的CSS =>
<style type="text/css">
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
</style>
和我的頭部=>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/Content/img/tsms/financial-literacy.gif" sizes="32x32">
<title>
AdminTSMS
</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/select2.css" rel="stylesheet"/>
<link href="/Content/css/datepicker3.css" rel="stylesheet"/>
<link href="/Content/css/AdminLTE.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<link href="/Content/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/css/icheck/blue.min.css" rel="stylesheet"/>
<link href="/Content/Custom_Admin.css" rel="stylesheet"/>
<link href="/Content/css/skins/skin-blue.css" rel="stylesheet"/>
<link href="/Content/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Content/js/plugins/bootstrap/bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Content/js/plugins/moment/moment.js"></script>
<script src="/Content/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/plugins/inputmask/jquery.inputmask.bundle.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/Custom_Login.js"></script>
<script src="/Scripts/MyCustomFile.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
我正在研究一個項目，這就是為什么有很多不必要的staff.for更好的理解，我為您提供了完整的項目標題。因為我認為標題/鏈接是問題的原因之一。css/ bootstrap專家？ 請幫我。
1 個解決方案
解決方案1
3 已采納 2017-05-12 08:28:08
請嘗試以下方法：
.center { margin-top: 50px; } .modal-header { padding-bottom: 5px; } .modal-footer { padding: 0; } .modal-footer .btn-group button { height: 40px; border-top-left-radius: 0; border-top-right-radius: 0; border: none; border-right: 1px solid #ddd; } .modal-footer .btn-group:last-child > button { border-right: 0; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div> <!-- line modal --> <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h3 class="modal-title" id="lineModalLabel">My Modal</h3> </div> <div class="modal-body"> <!-- content goes here --> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> <div class="btn-group btn-delete hidden" role="group"> <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button> </div> <div class="btn-group" role="group"> <button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button> </div> </div> </div> </div> </div> </div>
Bootstrap 4 .modal（'hide'）不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.