Question

当我从页面打开模式时，它完全可以打开，但是当我尝试使用其他模式中的相同按钮（在同一页面上打开）打开同一模式时，它拒绝显示。可能是什么问题？

编辑：我的，不好，我忘了发布代码。设计很糟糕，但是模态对话框如下：

Product

这是触发它的按钮（仅取自其他代码块）：

        <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>

Answer 1

添加两个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>

从其他模态，Bootstrap 3打开模态

1 个答案: