Question

我制作了一个引导模态框。模态框应包含不同的内容，具体取决于单击的链接。到目前为止，我所做的代码打开了相同的内容，但是标题正常工作您可以看到JsFiddle here

目前在两个框中都调用了内容文本。意味着隐私策略和cookie策略都在两个框中。

如何使链接“隐私策略”仅打开@Text的文本以获取“隐私隐私”？
如何使链接Cookie策略仅打开@Text的文本 Cookie政策？

HTML

<div class="container-fluid">
    <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="#exampleModal" data-whatever="Privatpolitik">Privacy Policy</a><br/>
                    <a href="#" data-toggle="modal" data-target="#exampleModal" data-whatever="Cookie-Politik">Cookie Policy</a><br/>
                    <div class="modal fade" id="exampleModal" 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">Privatpolitik</h4>
                                </div>
                                <div class="modal-body">@Text for Privacy Policy
                                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                      <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                          Shouldn´t the modal content text be here?
                                        </div>
                                      </div>
                                    </div>
                                    <div class="modal-body">@Text for Cookie Policy
                                        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                          <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                              Shouldn´t the modal content text be here?
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Luk</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在data-whatever=""中使用use并使用此js的模态主体添加相同的ID

modal.find('.modal-content .modal-body').hide();
modal.find('.modal-content #' + recipient).show();

也请检查更新的html，它有一个问题，所以我也已修复。 2个modal-body div必须彼此平行。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Modal Events</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="container-fluid">
    <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="#exampleModal" data-whatever="Privatpolitik">Privacy Policy</a><br/>
            <a href="#" data-toggle="modal" data-target="#exampleModal" data-whatever="Cookie-Politik">Cookie Policy</a><br/>
            <div class="modal fade" id="exampleModal" 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">Privatpolitik</h4>
                  </div>
                  <div class="modal-body" id="Privatpolitik">Text for Privacy Policy
                  </div>
                  <div class="modal-body" id="Cookie-Politik">Text for Cookie Policy
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Luk</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $('#exampleModal').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('.modal-title').text(' ' + recipient)
      modal.find('.modal-content .modal-body').hide();
      modal.find('.modal-content #' + recipient).show();
    })
  </script>
</body>

</html>

打开包含不同内容的模式框

1 个答案: