提交按钮不适用于 fancybox

Question

我在点击 link 时打开了一个 fancybox。

这个精美的盒子有用户名和密码，我想在点击提交按钮时对其进行身份验证。（为简化起见，我现在只将 fancybox 更改为提交按钮）

我写了一个 php 代码，它应该在 fancybox 或 html 页面上（不确定确切位置）显示 hello，但它没有显示。

如何在 fancybox 或 html 页面上单击提交按钮时打招呼？

我不想使用 ajax 调用，但是如果没有 ajax 调用是不可能的，那么在这种情况下如何使用 ajax？

//p.php

<html>
<head>

    <style>
    #hidden-content-b 
    {
    /* Custom styling */
    max-width: 850px;
    border-radius: 40px;

    /* Custom transition - slide from top*/
    transform: translateY(-50px);
    transition: all .33s;
    }

    .fancybox-slide--current #hidden-content-b
    {
    transform: translateY(0);
    }

    </style>

    <link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="fancybox-master/dist/jquery.fancybox.min.js"></script>

</head>

<body>

    <h2>fancyBox v3.1 - Inline content</h2>
    <form action = "p.php" method = "post">
        <div class="grid">

            <p>
            <a data-fancybox data-src="#hidden-content-a" 
            href="javascript:;" class="btn">Open demo</a>
            </p>

            <div style="display: none;" id="hidden-content-a">
                <center>
                <h1><b>HTML</b></h1>
                    <input type = "submit" value = "Submit" name = "submit"> 
                </center>
            </div>

            <?php
                if(isset($_POST['submit']))
                echo "hello";
            ?>

        </div>

    </form>
</body>
</html>

Answer 1

将表单操作重定向到同一页面并首先检查 if(isset($_POST['submit']))

Answer 2

当您使用 fancyBox 显示某些内容时，它会从其位置移动，因此它不在您的表单中。你只需要改变顺序元素，以便您的内容包含表单，例如：

<div class="grid">

  <p>
    <a data-fancybox data-src="#hidden-content-a" 
       href="javascript:;" class="btn">Open demo</a>
  </p>

  <div style="display: none;" id="hidden-content-a">
    <form action="p.php" method="post">
      <center>
        <h1><b>HTML</b></h1>
        <input type="submit" value="Submit" name="submit"> 
      </center>
    </form>
  </div>

</div>

Answer 3

我在使用 .Net 时遇到了同样的问题。您可以在不移动 HTML.

的情况下将 FancyBox 附加到您的表单

FancyBox 文档：

// Container is injected into this element
parentEl: "body",

所以要回答这个问题使用：

$('[data-fancybox]').fancybox({
    parentEl: 'form'
});

// Or better yet, use ID's
$('#ID_to_open_link').fancybox({
    parentEl: '#ID_of_form'
});

提交按钮不适用于 fancybox

Submit button not working with fancybox

html

php

fancybox

fancybox-2

fancybox-3