Php 带有“是”或“否”按钮的不透明表单覆盖
我有一个用php编写的网站，使用基本的HTML和CSS，它由一个输入表单和两个页面组成 第一个页面有一个问题和“是/否”按钮，然后进入下一页，详细显示信息 权势要求以某种方式将这两页合并为一页。他们的论点是，人们可能会因为第一种形式而感到厌烦，而不必费心继续第二种形式 另一方面，在查看信息页面之前，必须以某种方式或其他方式强制用户回答是/否问题 我认为一个可能的解决方案是显示信息页面，但将其与“是/否”页面重叠，这样用户可以看到要查看的信息，但只有单击其中一个按钮才能真正看到 我已经搜索并找到了一些可能相关的零碎信息，但我只是不知道如何把它们放在一起。这里提到了javascript和jquery，但不幸的是，我对这两个方面的知识扩展到了能够在被告知将其放在何处时将其粘贴到我的php代码中Php 带有“是”或“否”按钮的不透明表单覆盖,php,html,css,Php,Html,Css,我有一个用php编写的网站，使用基本的HTML和CSS，它由一个输入表单和两个页面组成 第一个页面有一个问题和“是/否”按钮，然后进入下一页，详细显示信息 权势要求以某种方式将这两页合并为一页。他们的论点是，人们可能会因为第一种形式而感到厌烦，而不必费心继续第二种形式 另一方面，在查看信息页面之前，必须以某种方式或其他方式强制用户回答是/否问题 我认为一个可能的解决方案是显示信息页面，但将其与“是/否”页面重叠，这样用户可以看到要查看的信息，但只有单击其中一个按钮才能真正看到 我已经搜索并找到了
任何关于此解决方案或其他解决方案的指导都是非常受欢迎的。我已经做了更多的研究，并根据代码创建了一个php演示，介绍了如何满足我的问题，并在下面为任何其他寻求此解决方案的人提供了我的版本
<?php
/*
Demo code based on <https://stackoverflow.com/questions/47842653/how-to-open-a-pop-up-when-page-loads-using-jquery>
The demo demonstrates the display of a page which is then overlaid (fade-in) with a permanent
pop-up that requests a user response (yes/no). The pop-up fades when the user responds.
The pop-up appears if $_SESSION['PopUpDone'] is NOT set. If it is set to any value then the
pop-up code is not generated.
When the user responds then $_SESSION['PopUpDone'] is set to the user input and the pop-up
will no longer appear.
*/
session_start();
# Control the turning on/off of $_SESSION['PopUpDone']
# If script called with parameter ?p=1 then reset the session variable to start demo again
if($_GET['p'] == '1') unset($_SESSION['PopUpDone']);
# Get the user's response and set the session variable
if(isset($_POST['response'])) {$_SESSION['PopUpDone'] = $_POST['response'];}
?>
<!DOCTYPE html>
<html>
<head>
<title>Pop-Up Demo</title>
<style>
/* ----- CSS ----- */
#popup {
display: inline-block;
opacity: 0;
position: fixed;
top: 10%;
left: 50%;
padding: 1em;
transform: translateX(-50%);
background: peachpuff;
border: 1px solid #888;
box-shadow: 1px 1px .5em 0 rgba(0, 0, 0, .5);
transition: opacity 2s ease-in-out;
}
#popup.hidden {display: none;}
#popup.fade-in {opacity: 1;}
</style>
</head>
<body>
<center>
<h1>Pop-Up Demo</h1>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<p>This is some page text. This is some tage text. This is some tage text. This is some tage text. </p>
<?php
if(!isset($_SESSION['PopUpDone'])) {
echo "
<div id = 'popup' class = 'hidden'>
<p>Put some text here Put some text here Put some text here Put some text here Put some text here</p>
<form method='post' action='' name='addNew'>
<center>
<input class='YesNoPopUp' id='YesNoPopUp' type='submit' name='response' value='Yes'/>
<input class='YesNoPopUp' id='YesNoPopUp' type='submit' name='response' value='No'/>
</center>
</form>
<p>Put some text here Put some text here Put some text here Put some text here Put some text here</p>
</div>
<script>
/* ----- JavaScript ----- */
window.onload = function () {
/* Cache the popup. */
var popup = document.getElementById('popup');
/* Show the popup. */
popup.classList.remove('hidden');
/* Fade the popup in */
setTimeout(function(){popup.classList.add('fade-in')});
/* Close the popup when a city is selected. */
document.getElementById('YesNoPopUp').onchange = function () {
/* Fade the popup out */
popup.classList.remove('fade-in');
/* Hide the popup. */
setTimeout(function(){popup.classList.add('hidden')}, 300);
};
};
</script>
";
}
?>
</center>
</body>
</html>
“但不幸的是，我对这两方面的知识扩展到了在被告知将其放在何处时能够将其粘贴到我的php代码中”——这就是问题所在。您被要求使用您不熟悉的技术。因此，现在是熟悉它们的时候了。从一些关于JavaScript、jQuery、CSS的入门教程开始，寻找JavaScript（jQuery或其他）中“模态对话框”的例子。作为一名程序员，你的雇主可能希望你做的不仅仅是复制/粘贴给你的文本。这一点是有建设性的。非常感谢。如果我真的被雇佣来做这件事，我早就被解雇了：）这是一个新的冒险，我们正在尝试，在鞋带上，开发一个可以工作的原型，但不一定是一个真正的“专业”网站。该网站的工作，我们有一个潜在的客户对它提供的服务感兴趣。他就是那个要求修改的人。我发现当从IE11运行时，这段代码完全无法处理弹出式覆盖。它显示背景，就是这样。有人能建议怎么做吗？经过进一步的研究，我发现IE在两行“setTimeout”上出现了语法错误。在改变它们之后，它也适用于IE。所以，毕竟一切都很好。