Opening a Modal Window “using” PHP

2020-04-11 03:27发布

问题:

I am creating a log in system in PHP and I'm trying to make it a little nicer.

When you log out, you get redirected back to index.php. Like this:

header("loaction: index.php?logout=true")

This makes the url look like www.mysite.com/index.php?logout=true. I then use the following code:

if(isset($_GET['logout'])) {

$logoutvalue = $_GET['logout'];

if($logoutvalue = "true") {
$notification = "You've been logged out!";  
}

to get the value of logout from the URL and do something with it.

I have a small popout window that will display the notification variable's value. In this case it's "You've been logged out!" My question is how do I get the modal window to display when the page loads and when the url equals /index.php?logout=true ?

All comments, answers, and suggestions are greatly appreciated!

Thanks! - Ryan

回答1:

First of all,

You can't "Open a Modal Window using PHP" directly. You can only do this only by exchanging variables (via JSON or XML), or embedding PHP conditions right into your markup.

PHP and JavaScript are independent.

My question is how do I get the modal window to display when the page loads and when the url equals /index.php?logout=true ?

There are two ways you can achieve this.
First: Make a good use of embedding PHP conditions right into the markup.

Second: Have somewhere hidden input, like (<input type="hidden" id="showModal" />) and then check if it exists via JavaScript itself.

For example:

<!DOCTYPE html>
<html>
<head>

   <script type="text/javascript">

      window.onload = function(){

           if ( document.getElementById('showModal') ){

               alert('Box'); //replace with your own handler
           }

      }

   </script>

</head>
<body>

<?php if ( isset($_GET['logout']) && $_GET['logout'] === 'true' ): ?>

<input type="hidden" id="showModal" />

<?php endif;?>
</body>
</html>


回答2:

Are you looking for something like:

<script>
<?php if(isset($_GET['logout']) && $_GET['logout'] === 'true'){
    echo 'alert("You\'ve been logged out!");'
}
?>
</script>

EDIT: I believe you are looking for something like this for a modal window (using jQuery)

<?php if(isset($_GET['logout']) && $_GET['logout'] === 'true'){
    $message = "You've been logged out!";
?>
    <script>
    $(function() {
        $("#dialog").dialog();//if you want you can have a timeout to hide the window after x seconds
    });
    </script>
    <div id="dialog" title="Basic dialog">
        <p><?php echo $message;?></p>
    </div>
<?php } ?>


回答3:

I know it is an old post, but to help someone in future with similar quest, I guess the following may help to get into right directions ( I have tested the below code myself, so please make adjustment).

<?php if(isset($_GET['logout']) && $_GET['logout'] === 'true'){
        $message = "You've been logged out!";
    ?>
        <script>
        $(function() {
         $('#myModal').modal('show');
        });
        </script>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit Data</h4>
                </div>
                <div class="modal-body">
                    <div class="fetched-data"><?php $message ?></div> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <?php } ?>


回答4:

Best way to get done this by using the PRG pattern.

index.php

1. Create the element for modal content in HTML

<div id=modal></div>

2. Style your #modal element

#modal {
    position: fixed;
    display: none; /*important*/
    color: white;
    text-align: center;
    z-index: 1000;
    width: 100%;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: crimson;
    line-height: 2;
}

3. Define function how to show and disappear the modal box using jQuery

'use strict'

window.jQuery ?

    $.fn.notify = function(interval) {      
        let el = $(this),
            text = el.text(),

            modal =()=> { // this will fire after the interval has expired
                el.fadeOut(),
                clearInterval(timer)
            },

            timer = setInterval(modal,interval)

        !text.match(/\S+/) || el.text('') // this will fire when modal box contains text    
            .append(`<h3>${text}</h3>`)
            .show()
    }

: alert('jQuery required.')

4. Attach .notify() to the jQuery selector

$(()=>{
    $('#modal').notify(1500) // 1500 is the interval in milliseconds
})

5. Insert the notification sent from PHP inside the #modal element

<div id=modal>
    <?=
        @$_SESSION["notify"]; // if this variable is not set, nothing will happen
        unset($_SESSION["notify"]); 
    ?>
</div>

6. Perform a simple $_GET request

<a href=parse.php?logout>Logout</a>


parse.php

7. Return a value using PHP in a $_SESSION variable

if (isset($_GET["logout"])) {
    $_SESSION["notify"] = "You have been logged out.";
    header("Location: index.php");
}


This is good practice. Once the logout request is sent to PHP, it will redirect to the index page with the result in a session variable. The PRG pattern does not always require a POST request. This example sends a GET request which is ok for logouts. Note that you have to place session_start(); at the top of your files.



回答5:

Ok, so your existing code is like this snippet, and the problem you're having is that you want to show a jQuery/Bootstrap modal triggered by/with PHP, but jQuery/JS hasn't loaded yet (so you'll get a "$ undefined" error).

When you say "a small popout window" I'm assuming you mean a bootstrap type modal.

if(isset($_GET['logout'])) {
  $logoutvalue = $_GET['logout'];

  if($logoutvalue = "true") {
    $notification = "You've been logged out!";  
  }
}

What I did was move the PHP code block to the end of the .php file, after jQuery (etc), and have an include, so it would look like this (assuming the name of your modal is id="logoutModal"):

logout.php

if(isset($_GET['logout'])) {
  $logoutvalue = $_GET['logout'];

  if($logoutvalue = "true") {
    include("logout-modal.php");  
  }
}

logout-modal.php

<?php ?>
  <script>
    $('#logoutModal').modal('show');
  </script>
<?php ?>

Not 100% sure this answers your question, but this works for me. Hope this helps.



回答6:

Or you could even write the script inside if statement:

<?php
if(isset($_GET['logout']) && $_GET['logout'] === 'true'){ ?>
    <script type="text/javascript>
     window.open(yourhtml);
 </script>
</php } 
else {
// may be some other script
}
?>


回答7:

Please download a Modal JS Library http://simplemodal.plasm.it

and Use the Condition

if(isset($_GET['logout'])) {

$logoutvalue = $_GET['logout'];

if($logoutvalue = "true") {
code to open the Modal as in the JS library..... 
}