时间戳

首页 > 解决方案 > 模态框缺少标题

html - 模态框缺少标题

问题描述

我在引导模式框中的标题有问题。我有不同的盒子，其中包含 x 个链接。每个链接都打开自己的模式框，其中包含链接的相关内容。

我用这里的代码做了一个 JsFiddle

如果我点击“取消订单”，我会在标题为“取消订单”的地方得到一个模态框。我需要那个标题是“取消订单”。对我来说，标题似乎是data-whateveror id？

如何在每个模态框中设置标题？

HTML

<div class="row">
  <div class="col-md-3">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">GENERAL</h3>
      </div>
      <div class="panel-body">
        <a href="#" data-toggle="modal" data-target="#contactPageModal" data-whatever="cancel-order">Cancel order</a><br/>
        <a href="#" data-toggle="modal" data-target="#contactPageModal" data-whatever="change-order">Change order</a><br/>
        <a href="#" data-toggle="modal" data-target="#contactPageModal" data-whatever="test">Headline test</a><br/>
        <div class="modal fade" id="contactPageModal" tabindex="-1" role="dialog" aria-labelledby="contactPageModalLabel">
          <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="contactPageModalLabel">Cancel order</h4>
              </div>
              <div class="modal-body" id="cancel-order">A text about canceling an order
                <div class="modal fade bs-contact-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">

                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-body" id="change-order">A text about changing your order
                <div class="modal fade bs-contact-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">

                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-body" id="test">Test text
                <div class="modal fade bs-contact-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">

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

Javascipt：

$('#contactPageModal').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget) 
      var recipient = button.data('whatever') 
      var modal = $(this)
      modal.find('.modal-title').text(' ' + recipient)
      modal.find('.modal-content .modal-body').hide();
      modal.find('.modal-content #' + recipient).show();
    })

标签： htmltwitter-bootstrap

解决方案

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header 2</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal 2.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

</div>

推荐阅读