Как можно изменить положение кнопки пагинации jquery в модальном режиме - PullRequest
Новая
       39

Как можно изменить положение кнопки пагинации jquery в модальном режиме

1 голос
/ 12 марта 2020

У меня есть модал, и я использую jquery шаги внутри него. Я хочу изменить кнопки шагов prev next и отправить позицию в нижний колонтитул модалов. Я пытался решить эту проблему, добавив div кнопки внутрь модального нижнего колонтитула, но кнопки не работали. Как я могу решить это? 

 <div class="modal-body">
  <form class="wizard-form steps-basic" action="#" data-fouc>
      <h6>Personal data</h6>
      <fieldset>
          <div class="row">
              <!-- form1 -->
          </div>
      </fieldset>

      <h6>Your education</h6>
      <fieldset>
          <div class="row">
              <!-- form2 -->
          </div>
      </fieldset>

      <h6>Your experience</h6>
      <fieldset>
          <div class="row">
              <!-- form3 -->
          </div>
      </fieldset>
  </form>
</div>

<div class="modal-footer">
    <!-- Steps buttons should be placed here -->
</div>



<script type="text/javascript">
    $(document).ready(function () {

           $('.steps-basic').steps({
            headerTag: 'h6',
            bodyTag: 'fieldset',
            transitionEffect: 'fade',
            titleTemplate: '<span class="number">#index#</span> #title#',
            labels: {
                previous: '<i class="icon-arrow-left13 mr-2" /> Previous',
                next: 'Next <i class="icon-arrow-right14 ml-2" />',
                finish: 'Submit form <i class="icon-arrow-right14 ml-2" />'
            },
            onFinished: function (event, currentIndex) {
                alert('Form submitted.');
            }
           });
        //var stepButtonsDiv = document.getElementsByClassName('actions clearfix');
        //$('.modal-footer').append(stepButtonsDiv);

    });
</script>

1 Ответ

0 голосов
/ 12 марта 2020

Кнопки можно разместить в модальном нижнем колонтитуле 

<div class="modal-footer">
    <span class="PrevButton"><i class="icon-arrow-left13 mr-2" /> Previous</span>
    <span class="NextButton">Next <i class="icon-arrow-right14 ml-2" /></span>
    <span class="SubmitButton">finish: 'Submit form <i class="icon-arrow-right14 ml-2" /> </span>
</div>

Первоначально скрыть их в документе .ready и показывать при щелчке, когда они вам нужны 

<script type="text/javascript">
    $(document).ready(function () {
        //when you need to hide
       $(".PrevButton").hide();
       $(".NextButton").hide();
       $(".SubmitButton").hide();
    });
    //then show on click by:

       $(".PrevButton").show();
       $(".NextButton").show();
       $(".SubmitButton").show();
</script>
...