1

Question

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

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

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

向Modal1的页脚添加另一个按钮
向Modal2的页脚添加另一个按钮
将以下脚本添加到您的javascript for 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();

    }

希望这有帮助

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

1 个答案:

1

2

3