[英]Opening modal from other modal , Bootstrap 3
When I am opening modal from page, it opens totally fine, but when I try to open that same modal with same button from other modal (opened on same page), it refuses to be shown. 当我从页面打开模式时,它完全可以打开,但是当我尝试使用其他模式中的相同按钮(在同一页面上打开)打开同一模式时,它拒绝显示。 What could possibly be problem?
可能是什么问题?
EDIT: My, bad I forgot to post code. 编辑:我,不好,我忘了发布代码。 It's awful design, but here is how modal dialog looks like:
这是很糟糕的设计,但模态对话框如下所示:
<div id="modalEditArticle" class="container modal fade" role="dialog" style="margin-top: 10%">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row vertical-offset-100">
<div class="col-sm-6 col-sm-offset-3">
<div class="alert alert-danger" id = "errorMessage" style="display: none"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Edit article</h3>
</div>
<div class="panel-body">
<form id="editArticleForm" method="PUT" action="/article/edit" class="form-horizontal col-sm-10 col-sm-offset-1" role="form">
<fieldset>
<div class="form-group">
<label>Article name:</label>
<input class="form-control" placeholder="Enter article name" id="name" name="name" type="text" readonly="readonly">
</div>
<div class="form-group">
<label>Unit price:</label>
<input class="form-control" placeholder="Enter unit price" id="unitPrice" name="unitPrice" type="text" >
</div>
<div class="form-group">
<label>Description:</label>
<input class="form-control" placeholder="Enter description" id="description" name="description" type="text" >
</div>
<div class="form-group">
<input id="id" name="id" type="text" style="display: none">
</div>
<!-- Select Basic -->
<label>Choose article type:</label>
<div class="form-group">
<select id="articleType" name="articleType" class="form-control">
<option value="Drink" >Drink</option>
<option value="Food">Food</option>
</select>
</div>
<div class="form-group">
<label>Amount (in grams for Food, in milliliters for Drink):</label>
<input class="form-control" placeholder="Enter amount (in grams for Food,in milliliters for Drink)" id="amount" name="amount" type="text" >
</div>
<!-- Select Basic -->
<div class="form-group">
<label>Choose restaurant where it will be served:</label>
<select id="restaurantId" name="restaurantId" class="form-control restaurantId">
</select>
</div>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Update article">
<button type="button" class="btn btn-lg btn-danger btn-block" data-dismiss="modal">Cancel</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And here is the button triggering it (just taken from other chunk of code): 这是触发它的按钮(仅取自其他代码块):
<button type="button" id="editArticleButton" class="btn btn-info btn-block" data-toggle="modal" data-target="#modalEditArticle"><span class="glyphicon glyphicon-edit"></span> Edit </button>
add both js files and use this http://jschr.github.io/bootstrap-modal/ 添加两个js文件并使用此http://jschr.github.io/bootstrap-modal/
<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Stack One</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<input class="form-control" type="text" data-tabindex="1">
<input class="form-control" type="text" data-tabindex="2">
<button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Stack Two</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<p>One fine body…</p>
<input class="form-control" type="text" data-tabindex="1">
<input class="form-control" type="text" data-tabindex="2">
<button class="btn btn-default" data-toggle="modal" href="#stack3">Launch modal</button>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
<div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Stack Three</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<input class="form-control" type="text" data-tabindex="1">
<input class="form-control" type="text" data-tabindex="2">
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.