Блог

Главная - Вопросы по программированию - Как инициализация модального Javascript работает в Materializecss?

Как инициализация модального Javascript работает в Materializecss?

#javascript #materialize

#javascript #материализовать

Вопрос:

Я вижу другие ответы, но я все еще не понимаю, что означает инициализация javascript и как я должен добавлять часть javascript на свою HTML-страницу? Если я хочу включить этот модал в свою HTML-страницу:

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

Мне сказали, что мне нужно сначала инициализировать его, используя этот код:

 $(document).ready(function(){
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  $('.modal').modal();
});

Если я добавлю это (часть javascript) в конец material.js , это не будет иметь никакого эффекта. Если я добавлю его на HTML-страницу и оберну его вокруг, используя вот так:

 <script>
    $(document).ready(function(){
          // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
          $('.modal').modal();
        });
</script>

Ответ №1:

Вы можете использовать обычный JavaScript для его инициализации вместо используемого вами jQuery:

 M.Modal.init(document.getElementById('modal1'));

Вы можете поместить этот код в <script> тег или включить файл .js, но убедитесь, что вы делаете это под модальными <div> и материализованными источниками.

Полный код может выглядеть примерно так:

 <!DOCTYPE html>
<html>
    <head>
        <title>Modal test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">   
    </head>
    <body>
   <!-- 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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
    <script>
         M.Modal.init(document.getElementById('modal1'));
    </script>
</html>
Метки: