What is a promise in Javascript?

Question

Nacho Zve De La Torre

Asked: 2020-10-20 11:43:50 +0800 CST 2020-10-20 11:43:50 +0800 CST 2020-10-20 11:43:50 +0800 CST

Closing a modal using JQuery and Materialize?

772

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

What I need?

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

What do I use?

Materialize and JQuery and Thymeleaf (but shouldn't 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 so you can see the other options 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 idea what I may be doing wrong? It is rare that neither option works well!

7 Answers

Voted

Fran Islas · Answer 1 · 2020-10-20T12:05:40+08:00

You don't need #modalOutmaterialize modals they have an option which is dismissible. What this option does is that when you click outside the modal it closes. Its default value is True . You can see the documentation here . I recommend working with instances of the plugin. That doc also shows you how to do it. It makes it easier for you to work with events in the future.

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

  $(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>

Edit with option 2 using the asking user's code:

This is very important. I think part of your mistake 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>

jcHernande2 · Answer 2 · 2020-10-20T11:53:56+08:00

jcHernande2

2020-10-20T11:53:56+08:002020-10-20T11:53:56+08:00

Try with this.

$('#modalOut').on('click', () => {
    $('#chocolateModal').closeModal();
});

1

Asdrubal Hernandez · Answer 3 · 2020-10-20T11:48:18+08:00

Asdrubal Hernandez

2020-10-20T11:48:18+08:002020-10-20T11:48:18+08:00

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

$('#modalOut').on('click', () => {
   $('#chocolateModal').modal('hide');
});

0

Diego Avila · Answer 4 · 2020-10-20T12:20:56+08:00

Diego Avila

2020-10-20T12:20:56+08:002020-10-20T12:20:56+08:00

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 make reference to open the modal by 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 helps you.

I suggest you review the documentation !!

Documentation-Modal

0

HTopete · Answer 5 · 2020-10-20T13:03:37+08:00

Maybe this will work for you: in this example the word Hello opens the modal via "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>

Roy Cai · Answer 6 · 2020-10-20T18:48:49+08:00

Roy Cai

2020-10-20T18:48:49+08:002020-10-20T18:48:49+08:00

It works for me with this:

<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 the html element with class .modaland the options as a parameter. Then call the method open()and it should work.

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

0

David Leonardo Molina Ruiz Dav · Answer 7 · 2020-10-23T05:49:04+08:00

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 it helps you

Closing a modal using JQuery and Materialize?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?