Question

我一直在使用一种模式，当用户点击“取消”时，该模式会被解雇。按钮。一切都工作正常，直到按钮出现错误。当我点击“取消”＆＃39;按钮，模态被解除，但关闭并再次打开。因此，需要两次单击“关闭”按钮以关闭模式。

这是＆＃39; Bootstrap＆＃39; modal，我没有对JS文件进行任何更改。只有CSS和HTML才被修改。在浏览器中检查时，我看到以下函数被调用两次。

<div class="modal-backdrop fade in"></div>

如何修复此错误？我不知道从哪里开始！以下是我的模态代码。

注意：＆＃39;交叉＆＃39;遇到同样的错误。模态右上角的咏叹调标签。

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

                        <div class="modal-dialog modal-sm">

                          <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="myModalLabel"><b>Why are you deleting this book?</b></h4>
                            </div>

                              <!--modal body starts -->
                              <div class="modal-body">

                                <div class="radio">
                                  <label>
                                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Sold
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Sold on another site or elsewhere
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Don't want to sell it now
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Lack of buyer interest
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Vacation, break
                                  </label>
                                </div>

                                <div class="radio">
                                  <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Other reason
                                  </label>
                                </div>

                              </div>
                              <!--modal body end -->

                              <div class="modal-footer">
                                <button type="button" class="btn btn-primary">Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                              </div>

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

用于打开模态的按钮的HTML代码

<button type= "submit" class="dashbtn dashbtn-danger">EDIT</button><br>
<button type= "button" class="dashbtn dashbtn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">DELETE</button>

Answer 1

当您的代码中有多个模式共享同一个类时，通常会发生这种情况。要防止出现这种情况，请为模态指定不同的ID，并在data-target属性中使用该id。试试这个：

<button type="submit" class="dashbtn dashbtn-danger">EDIT</button>
<br>
<button type="button" class="dashbtn dashbtn-primary" data-toggle="modal" data-target="#bs-example-modal-sm">DELETE</button>

对于你的模态：

<div class="modal fade" id="bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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="myModalLabel"><b>Why are you deleting this book?</b></h4>
            </div>
            <!--modal body starts -->
            <div class="modal-body">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Sold
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Sold on another site or elsewhere
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Don't want to sell it now
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Lack of buyer interest
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Vacation, break
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Other reason
                    </label>
                </div>
            </div>
            <!--modal body end -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

只需确保为每个模态指定不同的ID，然后使用data-target="#foo"

触发每个模态

查看有关模态数据属性的部分：Bootstrap Modals

模式中的数据消除在点击时被调用两次

1 个答案: