Question

我有一个用php编写的网站，该网站使用基本的HTML和CSS，其中包含一个输入表单，后跟两个页面。

第一个有一个问题，然后单击是/否按钮，然后转到下一页-详细显示信息。

被要求以某种方式将这两页合并为一体的权力。他们的论点是，人们可能会被第一种形式推迟，而不必费心进行第二种形式。

另一方面，在查看信息页面之前，必须以某种方式迫使用户以其他方式回答是/否问题。

我认为可能的解决方案是显示信息页面，但将其覆盖在是/否页面上，以使用户看到有要查看的信息，但直到他单击其中的一个时才能真正看清按钮。

我已经搜索并找到了可能相关的点点滴滴，但我只是不知道将它们放在一起。提到了javascript和jquery，但是不幸的是，我对这两种知识的了解扩展到了在被告知放置到哪里时能够将其粘贴到我的php代码中。

任何关于此目的或其他解决方案的指导都将受到欢迎。

Answer 1

根据代码Main Thread Checker，我做了更多的狩猎工作，并设法创建了一个满足我的问题的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'/>
                        &nbsp;&nbsp;&nbsp;
                        <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>

不透明的表格覆盖，是，没有按钮

1 个答案: