重置引导模式 [英] Reset bootstrap modal

问题描述

我想制作一个向导风格模式，并提出以下解决方案：

div片段：

 < div class =modal-instance hide fadeid =step1 > 
< div id =stepa> 
 ... 
< / div> 
< / div> 
 
 
< div id =stepbstyle =display：none;> 
 ... 
< / div> 
  

在步骤中按下按钮时，会加载一个步骤b。

JavaScript片段：

  $（＃stepa）。replaceWith（$（'＃stepb ））; 
 document.getElementById（'stepb'）。style.display ='block'; 
  

这工作正常。

我解雇了模态。 div stepa仍然被stepb所取代。我的解决方案是在隐藏模式时重新构建一个替代品：

  $（＃myModal）。on hidden，function（）{
 //替换小孩
}）; 
  

我试过了：

  $（ '＃步骤1'）的儿童（）除去（）。; 
 $（'＃step1'）。append（$（'＃stepa'））; 
  

和

  $（ ＃步骤1）的孩子。（ 分区：第一）replaceWith（$（ '＃步骤A'））; 
  

但是我很难选择step-a作为替代div，可能是因为它不是一个单独的div。我的问题是，这是一种向导式modal的正确方法，还是应该采取另一种方法？隐藏上一步和下一步，而不是复制它们。

 < button type =buttondata-toggle = modaldata-target =＃myModal>启动模式< / button> 
 
< div id =myModalclass =modal hide fadedata-step =1> 
< div class =step step1> 
< h1>步骤1< / h1> 
< button class =btn next>下一步< / button> 
< / div> 
< div class =step step2> 
< h1>步骤2< / h1> 
< button class =btn previous>上一个< / button> 
< button class =btn next>下一步< / button> 
< / div> 
< div class =step step3> 
< h1>步骤3< / h1> 
< button class =btn previous>上一个< / button> 
< button class =btn donedata-dismiss =modal>完成< /按钮> 
< / div> 
< / div> 
 
< style type =text / css> 
 #myModal> .step {display：none; } 
< / style> 
 
< script type =text / javascript> 
 $（function（）{
 showStep（parseInt（$（'＃myModal'）。data（'step'））|| 1）; 
 
 $（'＃ （'click'，function（）{
 showStep（parseInt（$（'＃myModal'）。data（'step'））+ 1）; 
}）; $（'＃myModal .previous'）。on（'click'，function（）{
 showStep（parseInt（$（'＃myModal'）。data（'step'）） ） -  1）; 
}）; 
 
 $（'＃myModal'）。on（'hidden'，function（）{
 showStep（1）; $ b $数据（'step'，step）; 
 $（'＃myModal>）; 
 
 function showStep（step）{
 $（'＃myModal'）。 .step'）。hide（）; 
 $（'＃myModal> .step'+ step）.show（）; 
} 
}）; 
< /脚本> b 
 
 
 $ b 
 nofollow> http://jsfiddle.net/7kg7z/5/  
 
So, I am using bootstrap's modal.

I want to make a wizard style modal and came up with the following solution:

div snippets:
<div class="modal-instance hide fade" id="step1">
 <div id="stepa">
  ...
 </div>
</div>


<div id="stepb" style="display: none;">
 ...
</div>
Upon pressing a button in step-a step-b is loaded.

javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.

But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() { 
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
解决方案
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<div id="myModal" class="modal hide fade" data-step="1">
 <div class="step step1">
  <h1>Step 1</h1>
  <button class="btn next">Next</button>
 </div>
 <div class="step step2">
  <h1>Step 2</h1>
  <button class="btn previous">Previous</button>
  <button class="btn next">Next</button>
 </div>
 <div class="step step3">
  <h1>Step 3</h1>
  <button class="btn previous">Previous</button>
  <button class="btn done" data-dismiss="modal">Done</button>
 </div>
</div>

<style type="text/css">
  #myModal > .step { display: none; }​
</style>

<script type="text/javascript">
 $(function() {
  showStep(parseInt($('#myModal').data('step')) || 1);

  $('#myModal .next').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) + 1);
  });

  $('#myModal .previous').on('click', function () {
   showStep(parseInt($('#myModal').data('step')) - 1);
  });

  $('#myModal').on('hidden', function() {
   showStep(1);
  });

  function showStep(step) {
   $('#myModal').data('step', step);
   $('#myModal > .step').hide();
   $('#myModal > .step' + step).show();
  }
 });​
</script>
http://jsfiddle.net/7kg7z/5/

                        
这篇关于重置引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！