bootstarp模态框不能再同一个页面多次使用问题 亲测有效!!!!

一般我们的web页面有时候都需要form提交,或者提示其他信息,此时,bootstarp中的模态框就是一个很好的解决方案,form表单有需要的时候就点击出来,灰常不错!。 常见的模态框 只能显示一个,其他的无法显示,是显示暗灰页面,又或者显示的模态框是另一个的模态框显示的信息。错误的那些页面就不显示了。现在说一下解决方法,可能遇到的问题就是这个呢!

看HTML注释


<!--在头和尾上在外嵌一个div标签-->
<div> 
<!--在头和尾上在外嵌一个div标签-->

<!--data-target="#Modal${equipment.id}"    修改id  修改id!!!!!!   把对应的位置改成一致,即可完成!!!!-->
                    <button type="button" class="btn btn-block  btn-info " data-toggle="modal" data-target="#Modal${equipment.id}" data-whatever="@mdo">修改器材信息</button>
                    <div class="modal fade" id="Modal${equipment.id}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">

                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">修改器材信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form method="post" action="${pageContext.request.contextPath}/admin_page/?method=ModifyEquipment ">

                                        <div class="form-group">
                                            <label for="id" class="control-label">器材ID:</label>
                                            <input type="text" class="form-control" id="id" value="${equipment.id}" name="id" readonly>
                                        </div>

                                        <div class="form-group">
                                            <label for="variety" class="control-label">器材种类:</label>
                                            <select class="form-control" id="variety" name="variety" >
                                                <option value="${equipment.variety}">${equipment.variety}</option>
                                                <option value="文具类">文具类</option>
                                                <option value="电工类">电工类</option>
                                                <option value="计算机类">计算机类</option>
                                                <option value="物联网设备类">物联网设备类</option>
                                            </select>
                                            <%--<input type="text" class="form-control" id="variety" name="variety" value="${equipment.variety}">--%>
                                        </div>

                                        <div class="form-group">
                                            <label for="name" class="control-label">器材名称:</label>
                                            <input type="text" class="form-control" id="name" name="name" value="${equipment.name}">
                                        </div>

                                        <div class="form-group">
                                            <label for="intro" class="control-label">器材简介:</label>
                                            <input type="text" class="form-control" id="intro" name="intro" value="${equipment.intro}">
                                        </div>

                                        <div class="form-group">
                                            <label for="money" class="control-label">器材金额(份):</label>
                                            <input type="text" class="form-control" id="money" name="money" value="${equipment.money}">
                                        </div>

                                        <div class="form-group">
                                            <label for="deposit_address" class="control-label">器材存放位置:</label>
                                            <input type="text" class="form-control" id="deposit_address" name="deposit_address" value="${equipment.deposit_address}">
                                        </div>

                                        <div class="form-group">
                                            <label for="total_quantity" class="control-label">器材总数:</label>
                                            <input type="text" class="form-control" id="total_quantity" name="total_quantity" value="${equipment.total_quantity}">
                                        </div>

                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label">器材损坏数量:</label>
                                            <input type="text" class="form-control" id="recipient-name" name="damage_quantity" value="${equipment.damage_quantity}">
                                        </div>

                                        <div class="form-group">
                                            <label for="damage_quantity" class="control-label">器材借出数量:</label>
                                            <input type="text" class="form-control" id="damage_quantity" name="number_of_lent" value="${equipment.number_of_lent}">
                                        </div>

                                        <div class="form-group">
                                            <label for="number_of_lent" class="control-label">器材剩余数量:</label>
                                            <input type="text" class="form-control" id="number_of_lent" name="surplus" value="${equipment.surplus}">
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn  btn-default" data-dismiss="modal">取消</button>
                                            <button type="submit" class="btn  btn-primary">确认添加</button>
                                        </div>

                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>

<!--在头和尾上在外嵌一个div标签-->
                </div>
<!--在头和尾上在外嵌一个div标签-->
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值