How to create a confirmation screen on top of a web page?


#1

Hi everyone,
The following code:

<?php  //1.php
  $con = mysqli_connect('1', '11t', 'r1s', '1r');
  IF(!$con)
    DIE('' .MYSQLI_CONNECT_ERROR());
  //delete id
  if (isset($_GET['del_mkt']))
    header("Location:to_forum2018-10-06.html");
?>
<!DOCTYPE HTML>
<html lang="EN">
<head>
  <title>1-php</title>
</head>
<body>
  <table>
    <tr class="title">
	<th>A</th>
    </tr>
    <?php
      echo "
        <tr><form action = '2.html' method = 'POST'>";
          echo "						
	    <td class = 'del' style='position:relative'>
	      <a href='2.html?del_mkt=".'1'."'>
	        <img src='pics/delete.gif' height='20px' width='20px' alt='Delete' style= position: absolute; top: 2.5px;'>
	      </a>							
	    </td>";
            echo "
          </form>
        </tr>";
    ?>
  </table>
</body>		
</html

displays image for the user to click on if he wants to perform ‘delete’.
The screen is shown as a screenshot attached “1”.
After the image had been clicked, the following code is activated:

<html lang="en">
<!--to_forum2018-10-06.html-->
<head>
  <title>to_forum2018-10-06.html</title>	
  <style >
    #mycon
    {
      position: absolute; //positioned relative to its first positioned (not static) ancestor 
      width: 15%;
      margin: 5px auto 20px;
      text-align: center;
      color: #6b8e23; /*GREEN*/
      background: #FFFFFF; 
      border: 2px solid #000000; /*green*/
      border-radius: 20px;
      font-family: 'David Libre', serif;
      font-size:20px;
      margin-top: 10%;
    }
    .tab_yes_no
    {
      border-bottom: none;
    }
    .tab_yes_no:hover 
    { 
      background-color: yellow;
    }
    h1
    {
      color:black;
    }
    table 
    {
      width: 80%;
      margin: auto;
      border-spacing: 0;	
    }
    td
    {
      border-bottom: 0.1em solid #6b8e23; /*GREEN*/
      border-right: 0.1em solid #6b8e23; /*GREEN*/
      text-align: center;
    }
    a
    {
      text-decoration: none;
    }
  </style>	
<body>
    <div id='mycon'>
      <h1>Delete confirmation</h1>
      <table >
        <td class='tab_yes_no' style="border-radius: 20px; border-left: 0.1em solid #6b8e23; border-right:none"><a href='?run=first' ><p>Yes</p></a></td>
        <td class='tab_yes_no' style="border-radius: 20px; border-right: 0.1em solid #6b8e23;"><a href='?run=second'><p style="border-left:1px solid red;">No</p></a></td>
      </table>
    </div>
</body>
</html>

Screen shot of the confirmation screen attached as “2”.
Unfortunately, when the confirmation screen shows, the original page diappears.
I’d like “2” (second,confirmatiom screen) to be on top of the original (“1”) screen.
How do I do that ?
I’d like “2” (second,confirmatiom screen) to be on top of the original (“1”) screen.
I try to do it without JS or other tool other them HTML, PHP and CSS because I dont know those computer languages and I thought HTML/CSS can handle it by showing/removing an element from a page which in this case is an HTML page.
The code I sent is an extract of a PHP page displaying database records to update, delete and add.
How do I do that ?
Thanksto_forum%20image1 to_forum%20image2


#2

Two ways. Either look into modal’s or just use an old school JS confirm prompt.