更改模式的内容而不关闭它

Question

假设我通过单击不同的图片打开了同一页面中的一系列模式。其中两个是这样的：

<!-- FIRST MODAL -->
<div class="modal fade" id="modal1" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title boldfont">THIS IS MODAL 1 HEADER</h3>
      </div>
      <div class="modal-body">
        <img src="images/lorem1.jpg" class="img-responsive">
      </div>
      <div class="modal-footer">
        <p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- SECOND MODAL-->
<div class="modal fade" id="modal2" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title boldfont">THIS IS MODAL 2 HEADER</h3>
      </div>
      <div class="modal-body">
        <img src="images/lorem2.jpg" class="img-responsive">
      </div>
      <div class="modal-footer">
        <p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

现在打开一个模态框后，要切换下一张图片，用户必须关闭模态框并单击另一张图片。我希望用户能够在当前打开的模式上单击某处并切换到下一个模式的内容而不关闭它。

我在页脚中添加了以下代码，但它看起来很糟糕，因为它关闭了模式并为新模式设置了动画。我只想更改内容。

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modal2">next</button>

任何帮助表示赞赏，在此先感谢。

Answer 1

可能不是最优雅的，但这是我设法实现您的请求以及来回切换的方式。

1. 在 Modal1 的页脚添加另一个按钮
2. 在 Modal2 的页脚添加另一个按钮
3. 将以下脚本添加到您的 javascript 中 3

1

<button class="btn btn-primary" onclick="nextMod()">Go to Modal 2</button>

2

<button class="btn btn-primary" onclick="priorMod()">Return to Modal 1</button>

3

function nextMod() {
        $("#modal2").show();
        $("#modal1").hide();
    }
function priorMod() {
        $("#modal1").show();
        $("#modal2").hide();

    }

希望对你有帮助