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

使用 JQuery 和 Materialize 关闭模式？

772

我再次问这个问题，因为我得到了所有答案，但我仍然无法解决问题，这对我来说也很奇怪，因为有几个答案非常合乎逻辑！

我需要的？

单击图像时打开模态框，然后仅在单击图像外部时才关闭模态框。

我用什么？

Materialize 和 JQuery 和 Thymeleaf（但不应该影响任何东西）

HTML 代码：

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

我留下评论，这样你就可以看到我尝试过的其他选项而没有取得任何有用的结果:(

JS代码：

$(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();
//  });

知道我可能做错了什么吗？很少有两种选择都很好用！

7 Answers

Voted

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

你不需要#modalOut物化模态，他们有一个选项是dismissible. 此选项的作用是，当您在模式外部单击时，它会关闭。它的默认值为True。您可以在此处查看文档。我建议使用插件的实例。该文档还向您展示了如何做到这一点。它使您将来更容易处理事件。

我给你留下一个例子，我希望这是你所需要的。干杯!

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

使用询问用户的代码使用选项 2 进行编辑：

这个非常重要。我认为你的部分错误是没有初始化 .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

试试这个。

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

您只需指定此 id 是模态的。

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

根据文档打开一个 Materialize 模态窗口是：

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

这将是使用 Jquery 的代码，在哪里引用以通过类打开模式。您还拥有完整版：

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

关闭它将是：

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

我希望它对你有帮助。

我建议您查看文档！

文档模式

0

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

也许这对你有用：在这个例子中，单词Hello通过"Om.onclick"打开模式，Om是 P 的 Id。

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

它对我有用：

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

当您单击按钮时，您将创建一个模态实例并将带有类.modal和选项的 html 元素作为参数传递。然后调用该方法open()，它应该可以工作。

正如他们所说，默认情况下模式是可关闭的，这意味着当您单击外部或使用键时它将关闭ESC。

0

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

根据您的方法，它将是这样的：

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

有了这个，你打开模式点击图像，当你点击它外面时它会关闭。希望对你有帮助

使用 JQuery 和 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?