2

だから、私はブートストラップのモーダルを使用しています。

ウィザードスタイルをモーダルにしたいので、次の解決策を考え出しました。

divスニペット：

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


<div id="stepb" style="display: none;">
 ...
</div>

ステップでボタンを押すと、ステップbがロードされます。

javascriptスニペット：

$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';

これは問題なく動作します。

しかし、私がモーダルを却下したとき。divstepaはまだstepbに置き換えられています。私の解決策は、モーダルが非表示になっているときに、ステップに戻る置換を構築することでした。

$("#myModal").on("hidden", function() { 
//replace the child
});

私は試した：

$('#step1').children().remove();
$('#step1').append($('#stepa'));

と

$("#step1").children("div:first").replaceWith($('#stepa'));

しかし、おそらく別のdivではないために、ステップaを置換divとして選択するのに苦労しています。私の質問は、これはウィザードスタイルのモーダルに適したアプローチですか、それとも別のアプローチを取る必要がありますか？

4

1 に答える 1

1

前のステップと次のステップをコピーするのではなく、非表示にする方がはるかに簡単です。

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

于 2012-12-29T17:45:18.787 に答える