[英]Opening modal from other modal , Bootstrap 3
當我從頁面打開模式時,它完全可以打開,但是當我嘗試使用其他模式中的相同按鈕(在同一頁面上打開)打開同一模式時,它拒絕顯示。 可能是什么問題?
編輯:我,不好,我忘了發布代碼。 這是很糟糕的設計,但模態對話框如下所示:
<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>
這是觸發它的按鈕(僅取自其他代碼塊):
<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>
添加兩個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.