主页 / 问题 / 1036334
Accepted
Gleb Pristupa
Asked:2020-10-19 16:29:24 +0800 CST2020-10-19 16:29:24 +0800 CST

模态花式框

  • 772

早上好，为什么单击第二个按钮无法打开模态？

$("#btnModal").fancybox();
$(".btn-modal").on("click", function () {
    $("#form-modal").fadeOut("fast", function () {
        $(this).before("<p><strong>Вы получили выгоду!</strong></p>");
        setTimeout("$.fancybox.close()", 1000);
    });
});
#feedback {
    display: none;
}

.fancybox-content {
    max-width: 430px;
    padding: 65px 65px 32px 65px;

    form {
        text-align: center;

        h1 {
            font-size: 24px;
            line-height: 48px;
            font-weight: 500;
            margin-bottom: 20px;
        }
    }
}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>


<button href="#feedback" id="btnModal">Получить выгоду 1</button>
<button href="#feedback" id="btnModal">Получить выгоду 2</button>

<div id="feedback" class="modal">
    <form id="form-modal">
        <h1>Получите все выгоды!</h1>
    </form>
</div>

html

1 个回答

  1. Best Answer

    $(".btnModal").fancybox();
$(".btn-modal").on("click", function () {
    $("#form-modal").fadeOut("fast", function () {
        $(this).before("<p><strong>Вы получили выгоду!</strong></p>");
        setTimeout("$.fancybox.close()", 1000);
    });
});
    <style>
#feedback {
    display: none;
}

.fancybox-content {
    max-width: 430px;
    padding: 65px 65px 32px 65px;

    form {
        text-align: center;

        h1 {
            font-size: 24px;
            line-height: 48px;
            font-weight: 500;
            margin-bottom: 20px;
        }
    }
}
</style>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>


<button href="#feedback" class="btnModal">Получить выгоду 1</button>
<button href="#feedback" class="btnModal">Получить выгоду 2</button>

<div id="feedback" class="modal">
    <form id="form-modal">
        <h1>Получите все выгоды!</h1>
    </form>
</div>

    • 2

相关问题