2

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

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

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

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

3 回答 3

0

当您使用 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>
于 2017-10-29T10:04:12.313 回答
0

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

于 2017-10-29T04:54:13.357 回答
0

我对.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'
});
于 2019-06-28T18:30:38.473 回答