Question

当我点击编辑按钮时，弹出我的编辑信息模式但当我关闭它并单击添加条目的按钮时，编辑模式仍会弹出。有什么想法吗？

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">

                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                                            <h5 class="modal-title" id="myModalLabel">Add a medicine</h5>
                                        </div>
                                        <div class="modal-body">
                                            <form enctype="multipart/form-data" id="modal_form_id" method="POST">
                                               <div class="form-group">
                                                <label class="control-label mb-10">Generic Name</label>
                                                <select class="form-control" name="medicine_id" id="medicine_id">
                                                    @foreach($items as $item)
                                                    <option value="{{$item->id}}" >{{$item->generic_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="form-group" id="form-group-dosage_name">
                                                <label class="control-label mb-10">Dosage Volume</label>
                                                <input type="text" name="dosage_name" id="dosage-volume" class="form-control" placeholder="Example: 20mg">
                                                <span class="help-block"></span>
                                            </div>

                                            <div class="form-group" id="form-group-form">
                                                <label class="control-label mb-10">Form</label>
                                                <input type="text" name="form" id="form-dosage" class="form-control" placeholder="Bottle, Tablet">
                                                <span class="help-block"></span>
                                            </div>

                                            <div class="form-group" id="form-group-price">
                                                <label class="control-label mb-10">Price Per piece</label>
                                                <input type="text" name="price" id="price" class="form-control" placeholder="Price">
                                                <span class="help-block"></span>
                                            </div>

                                            <div class="form-group" id="form-group-photo">
                                                <label class="control-label mb-10">Insert a photo</label>
                                                <div class="panel-wrapper collapse in">
                                                    <div class="panel-body">
                                                     <div class="mt-20">
                                                        <input type="file" name="photo" id="input-file-now" class="dropify" >
                                                    </div>  
                                                </div>
                                            </div>
                                            <span class="help-block"></span>
                                        </div>
                                        {{ csrf_field() }}
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="action_button" class="btn btn-success waves-effect" id="save-dosage">Save</button>
                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                    </div>

所以这是模态的代码

Answer 1

通常，这是因为在这两种情况下ID的名称都是冲突的或冗余的。

首先，错误的目标（注意data-target="#myModal"）：

// --------------------------------- Here
<button type="button" data-target="#myModalAdd" class="btn btn-primary btn-lg" data-toggle="modal" >
 Open Modal
</button>
// --------------------------------- Here
<button type="button" data-target="#myModalEdit" class="btn btn-primary btn-lg" data-toggle="modal" >
 Open Modal
</button>

您需要做的就是确保data-target属性目标正确的模态框（模态框可以通过使用id进行区分，例如：<div id="myModalAdd" .....>

第二次，你是从js代码直接/编程调用的，如下所示：

$( '#myModalAdd' ).modal('show'); // or
$( '#myModalEdit' ).modal('show');

在这种情况下，请确保$( <modal's ID> )选择器正确无误。

即使单击其他按钮，模态仍然会弹出

1 个答案: