Close a modal using JQuery and Materialize?

Navigation
1

I ask the question again because with all the answers they gave me I still could not solve the problem, which also seems super strange because several of the answers have a lot of logic!

What do I need?

Open a modal when you click on an image and then the modal one closes only when you click outside of it.

What use?

Materialize and JQuery and Thymeleaf (but should not affect anything)

HTML Code: 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="icon" th:href="@{/favicon_heladeria.png}" />

    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" th:href="@{/app.css}" />

        <h2 class="mid-title">Nuestros Helados</h2>
    </div>
    <div class="helados container">
        <div class="row">
            <div class="col s12 l4" id="chocoDiv">
                <a class="modal-trigger" href="#chocolateModal">
                <img class="tastes" th:src="@{/images/chocolate.png}" />
                </a>
                <span class="taste-name">CHOCOLATES</span>
            </div>
            <div class="col s12 l4">
                <img class="tastes" th:src="@{/images/crema.png}" />
                <a href="#"></a>
                <span class="taste-name">CREMAS</span>
            </div>
            <div class="col s12 l4">
                <img class="tastes" th:src="@{/images/dulceDeLeche.png}" />
                <a href="#"></a>
                <span class="taste-name">DULCE DE LECHES</span>
            </div>
            <div class="col s12 l4">
                <img class="tastes" th:src="@{/images/frutales.png}" />
                <a href="#"></a>
                <span class="taste-name">FRUTALES</span>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div id="chocolateModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">Chocolates</h4>
            </div>
        </div>
    </div>
    <script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>
    <script th:src="@{/vendor/materialize/js/materialize.min.js}"></script>
    <script th:src="@{/app.js}"></script>
</body>
</html>

I leave the comments to see the other options that I tried without achieving anything useful: (

JS Code: 

$(function(){
    // Activate mobile nav
    $(".button-collapse").sideNav({edge: 'right'});
});

//  $(document).ready( () =>{
//    $('.modal').modal();
//  });

// ESTE FUE EL ÚNICO QUE ANDUVO (Pero luego no lo puedo cerrar)

//$('#chocoDiv').on('click', () => {
//    $('#chocolateModal').show();
//});

document.querySelector('#chocoDiv').addEventListener('click', () => {
  var element = document.querySelector('#chocolateModal');
    var modal = M.Modal.init(element, {});
    modal.open();
});

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

Any ideas that I may be doing wrong? It's rare that no option is right!

    
asked by Nacho Zve De La Torre 19.10.2018 в 21:43
source

7 answers

4

You do not need #modalOut the materialize manners have an option that is dismissible . This option does that when you click outside the modal it closes. Its default value is True . You can see the documentation Here . I recommend working with plugin instances. In that doc he also teaches you how to do it. It makes it easier for you to work with events in the future.

I leave an example that I hope is what you were needing. Regards! 

  $(document).ready(function(){
    $('.modal').modal();
  });
img{
width:200px;
height:200px;
}
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <!-- Modal Trigger -->
  <a class="modal-trigger"    href="#modal1">
  <img src ="https://cdn.sstatic.net/Sites/es/img/[email protected]?v=62634cce9d6c" />
  </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>

Editing with option 2 using the code of the user who asks:

This is very important. I think part of your error is not initializing .modal 

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

width:200px;
height:200px;
}
   
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


 
        <h2 class="mid-title center">Nuestros Helados</h2>
    
    <div class="helados container">
        <div class="row center">
            <div class="col s12 l4" id="chocoDiv">
                <a class="modal-trigger" href="#chocolateModal">
                <img class="tastes" src="https://cdn.sstatic.net/Sites/es/img/[email protected]?v=62634cce9d6c}" />
                </a>
                <p class="taste-name">CHOCOLATES</p>
            </div>
            <div class="col s12 l4">
            <a class="modal-trigger" href="#CREMASModal">
                <img class="tastes" th:src="@{/images/crema.png}" />
             </a>
                <p class="taste-name">CREMAS</p>
            </div>
            <div class="col s12 l4">
            <a class="modal-trigger" href="#DULCEModal">
                <img class="tastes" th:src="@{/images/dulceDeLeche.png}" />
               </a>
                <p class="taste-name">DULCE DE LECHES</p>
            </div>
            <div class="col s12 l4">
            <a class="modal-trigger" href="#FRUTALESModal">
                <img class="tastes" th:src="@{/images/frutales.png}" />
               </a>
                <p class="taste-name">FRUTALES</p>
            </div>
        </div>
    </div>
    <!-- Modal Chocolate -->
    <div id="chocolateModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">Chocolates</h4>
            </div>
        </div>
    </div>

 <!-- Modal CREMAS -->
    <div id="CREMASModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">CREMAS</h4>
            </div>
        </div>
    </div>
     <!-- Modal DULCE -->
    <div id="DULCEModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">DULCE DE LECHES</h4>
            </div>
        </div>
    </div>
    
    <!-- Modal FRUTALES -->
    <div id="FRUTALESModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">FRUTALES</h4>
            </div>
        </div>
    </div>
    
answered by 19.10.2018 / 22:05
source
1

Try this one. 

$('#modalOut').on('click', () => {
    $('#chocolateModal').closeModal();
});
    
answered by 19.10.2018 в 21:53
0

You just have to specify that this id is a modal. 

$('#modalOut').on('click', () => {
   $('#chocolateModal').modal('hide');
});
    
answered by 19.10.2018 в 21:48
0

According to the documentation to open a Materialize modal window is: 

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

This would be the code using Jquery, where to reference to open the modal for the class. You also have the full version: 

        document.addEventListener('DOMContentLoaded', function () {
            var Modalelem = document.querySelector('.modal');
            var instance = M.Modal.init(Modalelem);
            instance.open();
        });

To close it would be: 

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

I hope it serves you.

I suggest you check the documentation !!

Documentation-Modal

    
answered by 19.10.2018 в 22:20
0

Maybe this works for you: in this example the word Hello opens the modal using "Om.onclick" , Om being the Id of P. 

var modal = document.getElementById('chocolateModal');

Om.onclick = function() {
    modal.style.display = "block";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
<p id="Om">Hola</p>
<div id="modalOut">
<div id="chocolateModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">Chocolates</h4>
            </div>
        </div>
    </div>
</div>
    
answered by 19.10.2018 в 23:03
0

This works for me: 

<div class="modal">
    <div class="modal-content">
        Contenido modal
    </div>
</div>

<button type="button" class="btn">Modal</button>

<script>
  document.querySelector('button').addEventListener('click', () => {
  var element = document.querySelector('.modal');
    var modal = M.Modal.init(element, {});
    modal.open();
  });
</script>

When you click on the button you create an instance of the modal and pass it as a parameter the html element with class .modal and the options. Then, call the open() method and it should work.

As they said, by default the modal is dismissible, which means that it will close when you click outside or with the ESC key.

    
answered by 20.10.2018 в 04:48
0

According to your approach it would be like this: 

$(document).ready(function(){
  $('.modal').modal();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div class="helados container">
  <div class="row">
    <div class="col s12 l4" id="chocoDiv">
      <a class="modal-trigger" href="#chocolateModal">
      <img class="tastes" src="https://cdn-3.expansion.mx/dims4/default/ac14b43/2147483647/strip/true/crop/4830x3206+0+0/resize/800x531!/quality/90/?url=https%3A%2F%2Fcherry-brightspot.s3.amazonaws.com%2Fce%2F69%2F17d61fd24182bd3dda71306e54ff%2Fshutterstock-524456035.jpg" width="200"/>
       
       <span class="taste-name">CHOCOLATES</span>
      </a>
    </div>            
  </div>
</div>
<!-- Modal -->
<div id="chocolateModal" class="modal">
  <div>
    <div class="modal-content">
      <h4 class="modal-title">Chocolates</h4>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

With this you open the modal click on the image and it closes when you click outside of it. I hope you serve

    
answered by 22.10.2018 в 15:49
how can I make the footer stay down DateTime.parseExact does not work