javascript - 从其他模态打开模态,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>
推荐阅读
- c - 我如何计算复数的模块
- python - Python BeautifulSoup 从包含属性的任何元素中获取属性值
- vue.js - 如果数组包含值,Vuejs如何显示Div
- mysql - 反应正在将数据发布到控制台,但数据未成功使其成为 mysql 数据库
- time-complexity - 程序的整体时间复杂度?
- r - 为什么我进行更改时闪亮的应用程序没有重新启动?
- r - 在带有循环的函数中添加迭代值
- c# - 在 C# 中,如何检查列表中的重复元素,然后打印重复元素的名称?
- java - 返回空的特定搜索结果(Spotify API)
- windows - 使用 cmd 连接到新的 wifi 网络