无法通过在 window 外部单击来弄清楚如何关闭模态

Question

无论我尝试什么，它都不适合我。 我希望用户点击一个苹果并显示一个模式。 我在模态框内放置了一个“x”来关闭它。 我只需要知道如何通过单击模式外部来关闭它。

这是苹果按钮的 JavaScript 代码：

    <script>
        var ambModal = $('#ambPopup');

        $('#amb').click(function() {
            ambModal.show();
        });

        $('.ambClose').click(function() {
        ambModal.hide();
    });

    </script>

这非常有效，但我已经在互联网上搜索了解决方案，但我尝试过的任何方法都没有解决我的问题。 我确实在 HTML 中加载了 jQuery。 这个 function 是否需要引导程序才能工作？ 有可能我的 header 弄错了。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apples2Apples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="applestyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">

<!--FONT FOR BODY-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

我错过了什么吗？ 请有人回复，如果可以的话。 谢谢！

Answer 1

不确定您的用例，但对我有用的是在模态后面包含一个额外的元素（如覆盖，但如果您愿意，可以是透明的）以捕捉模态 window 之外的点击。 这是一个例子。

 $("body").on("click", '.toggle-modal', function() { if ($('#ambPopup').is(":visible")) { $('#ambPopup').fadeOut("fast", function() { $(this).remove(); }); } else { const modal = $("<div />", { "id": "ambPopup" }).append( $("<div />", { "class": "modal-overlay toggle-modal" }), $("<div />", { "class": "modal-content" }).text("Content for the modal. Can be dynamic too.").append( $("<div />", { "class": "modal-close toggle-modal" }) ) ).appendTo("body").fadeIn("fast").css("display", "flex"); } });

 body, html { margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } #ambPopup { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; }.modal-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0, 0, 0, .1); cursor: pointer; }.modal-content { background: white; padding: 30px; font-size: 16px; line-height: normal; text-align: center; z-index: 2; position: relative; margin: auto; }.modal-close { position: absolute; top: 0; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: red; transform: translate(0, -50%); cursor: pointer; z-index: 10; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="toggle-modal">Show modal</button>

Answer 2

我相信您正在使用自定义模式？

您可以在 此处为您的版本 (3.4.1) 使用引导模式。

他们已经有了从关闭按钮和点击外部或背景关闭模式的脚本。