Question

我点击一个链接打开一个fancybox。

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

我已经编写了一个应该在fancybox或html页面上显示问号的php代码（不确定在哪里）但是没有显示。

如何在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

将表单操作重定向到同一页面并首先检查是否（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

3 个答案: