Question

在下面的代码中，两个按钮都应该切换弹出窗口，但只有一个可以工作。

第一个按钮（SUBMIT）将提交表单，但弹出窗口拒绝打开

第二个按钮（TEST）不提交表单但弹出窗口显示

我不明白为什么它不起作用。第一个按钮应该提交表单并打开弹出窗口。

<script type="text/javascript" src="https://www.ni-dieu-ni-maitre.com/scripts/jquery.fancybox.js?v=2.1.1"></script>
<link rel="stylesheet" type="text/css" href="https://www.ni-dieu-ni-maitre.com/scripts/jquery.fancybox.css?v=2.1.1" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();

        $('.fancybox').click(function() {
            $.fancybox.open({});
        });

        $("#popupajouterpanier").fancybox({
            openEffect: 'elastic',
            openSpeed: 150,
            closeEffect: 'elastic',
            closeSpeed: 150,
            width: 500,
            height: 300,
            scrolling: 'no',
            padding: 15
        });

        $("#popupajouterpanier2").fancybox({
            openEffect: 'elastic',
            openSpeed: 150,
            closeEffect: 'elastic',
            closeSpeed: 150,
            width: 500,
            height: 300,
            scrolling: 'no',
            padding: 15
        });
    });
</script>

</head>

<body>

    <div id="ribbonmenu">
        <div class="ribbon">
            <a href="https://www.ni-dieu-ni-maitre.com/commande.php" rel="nofollow" class="navlink basketUrlHolder" id="navlink">BASKET </a>
            <span class="basket-counter">0</span></a>

        </div>
    </div>

    <script src="https://www.ni-dieu-ni-maitre.com/shop-controller.js"></script>
    <form action="" style="padding: 0px;" method="post" name="tshirt_form" id="tshirt_form" onload="hideProgress()">
        <input type="hidden" name="product" id="productId" value="1000933638" />
        <input type="hidden" name="article" id="articleId" value="16047246" />
        <input type="hidden" name="view" id="currentView16047246" value="351" />
        <input type="hidden" name="color" id="productColor16047246" value="2" />
        <select class="b-core-ui-select__select" id="size" name="size" onchange="redirect(this);">
            <option selected value="3">M</option>
        </select>
        <select class="b-core-ui-select__select" id="quantity" name="quantity">
            <option selected value="1">1</option>
        </select>

        <a style="position:relative;top:10px;" onclick="document.getElementById('loader').style.display='block';hideProgress()" id="popupajouterpanier" href="#inlinepopupajouterpanier">SUBMIT</a>
    </form>

    <a style="position:relative;top:10px;" onclick="document.getElementById('loader').style.display='block';hideProgress()" id="popupajouterpanier2" href="#inlinepopupajouterpanier">TEST</a>

    <div style="display: none;">
        <div id="inlinepopupajouterpanier2" style="width:550px;height:350px;text-align:center;">
            if this popup shows up, then it's working !!!!
        </div>
    </div>

Answer 1

按钮的ID不应该相同。我找到了它的“popupajouterpanier”。它只能用于具有唯一ID名称的情况。

jquery fancybox没有显示

1 个答案: