Question

我正在使用bootstrap模式。

我想让它像巫师一样。

<div class="modal fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>Content 1</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button id="next" type="button" class="btn btn-primary">Next</button>
  </div>
</div>

单击“下一步”按钮后，内容1将隐藏，下一个内容将显示。

工作正常。这是js：

$('#next').click(function(){
  $('#myModal .modal-body').html('<p>Content 2</p>');
});

现在，如果我关闭模态，并重新打开模态。它显示的是内容2，而不是将内容1显示为初始内容。

每当我打开模态时，如何使模式将内容1显示为初始内容？请帮帮我。

Answer 1

以下命令将永久替换模态内容

$('#myModal .modal-body').html('<p>Content 2</p>');

如果您想再次返回Content 1，请从JavaScript调用以下代码以打开模式。

$('#myModal .modal-body').html('<p>Content 1</p>');
$('#myModal').modal("show");

虽然我建议默认情况下在不同的部分提供所有内容，而不是更改内容，但请使用显示/隐藏部分。

摆弄现有代码（替换内容） http://jsfiddle.net/TpjWD/2/

隐藏代码 http://jsfiddle.net/TpjWD/3/

Answer 2

demo

下一步按钮点击事件的简单功能

function hideContent()
{
    $("#ctn1").hide();
    $("#ctn2").show();
}

模态窗口

<a data-toggle="modal" href="#newModal1">Launch</a>

<div id="newModal1" class="modal hide fade">
  <div class="modal-body">
    <p id="ctn1">Content 1</p>

      <p style="display:none;" id="ctn2">Content 2</p>
  </div>
  <div class="modal-footer">

      <button id="next" type="button" class="btn btn-primary" onclick=" hideContent()">Next</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
  </div>
</div>

Bootstrap模式重置为初始内容

2 个答案: