Как я могу использовать javascript для открытия нового html после того, как модал материализации открылся в течение 3 секунд - PullRequest
Новая
       20

Как я могу использовать javascript для открытия нового html после того, как модал материализации открылся в течение 3 секунд

0 голосов
/ 10 мая 2018

Я создаю страницу входа в систему, и у меня она есть, так что, как только пользователь нажимает кнопку входа в систему, появляется модальное сообщение с надписью «Вход успешен». Я хочу, чтобы после того, как модал появился в течение 3 секунд, он автоматически открыл мою страницу profile.html.

Я использую модализацию материализации.

Вот код, который у меня есть: 

<div class='row'>
  <div class='input-field col s12'>
    <input class='validate' type='email' name='email' id='txtEmail' />
    <label for='email'>Enter your email</label>
  </div>
</div>
<div class='row'>
  <div class='input-field col s12'>
    <input class='validate' type='password' name='password' id='txtPassword' />
    <label for='password'>Enter your password</label>
  </div>
</div>
<div class='row'>
  <div class="col s12">
    <button data-target="modal2" id="btnLogin" type='submit' class='col s12 btn startup modal-trigger'>Login</button>
  </div>
<!-- Login SUCCESS Modal Structure -->
<div id="modal2" class="modal">
  <div class="modal-content" id="modal2content">
    <div class="row">
      <div class="col s5 offset-s4">
        <i class="success large material-icons">check</i>
      </div>
   </div>
   <p class="success">Login Successful!</p>
 </div>

У меня уже есть JavaScript-код Materialise для запуска модального режима:

$(document).ready(function(){ $('.modal').modal(); });

Но мне нужно иметь возможность открыть файл profile.html после запуска модального режима. Будем благодарны за любые идеи, ссылки или другие способы их настройки.

1 Ответ

0 голосов
/ 10 мая 2018

Модальный Bootstrap имеет событий .Вы можете использовать событие shown_bs_modal. 

$('.modal').on('shown.bs.modal', function(e) {

  // Wait 3 seconds
  setTimeout(function() {

    window.location.href = 'url_of_your_profile_page';

  }, 3000);
});

После показа модального режима подождите 3 секунды, затем перейдите к URL-адресу страницы вашего профиля.

Редактировать: Каккажется, что вы используете материализованные модалы, а не бутстрапные модалы, вот новая версия.Материализованные модалы имеют событие onOpenEnd. 

$('.modal').modal({

  onOpenEnd: function() {

    // Wait 3 seconds
    setTimeout(function() {

      window.location.href = 'url_of_your_profile_page';

    }, 3000);
  }
});

Более ранние версии библиотеки, по-видимому, использовали ready вместо onOpenEnd.См. документацию для последней версии.

Пример подтверждения концепции: выведите предупреждение, как только будет показан модальный тип. 

$(document).ready(function() {

  $('.modal').modal({
  
    onOpenEnd: function() {
    
      alert('modal has opened');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
...