Display modal dialog from within PHP

I would like to display the equivalent to a modal dialog in several parts of PHP code, such that when something happens I display the dialog to ask something like "Do you want to do this?" with a Yes/No button. Best of all, that the person cannot click outside the dialog to close it, without answering the question. How do I best do that? If you have a simple example (code), all the better!
RJVAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Giovanni HewardCommented:
How about :

<?php echo '<script>var r=confirm("Press a button!");if (r==true){alert("You pressed OK!");}else{alert("You pressed Cancel!");}</script>'; ?>

Open in new window


:-)
0
RJVAuthor Commented:
I'd really like it to be that simple but the idea is what you have out there where you display the equivalent of a dialog or a window where the rest of the background goes dark or similar. In other words, quite a bit more styled.
0
Giovanni HewardCommented:
Take a look at jQuery.  PHP can be used to dynamically update dialog values, etc.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RJVAuthor Commented:
I have, right up to some cases of simple modal, but the issue was how to load that in PHP and get the result there. All examples are in html and I'd like to keep it within the PHP.

I have done quite a bit of researching before coming here and I would prefer experts to point me in the right direction with the best solution rather than going it purely alone, as it were (such as to avoid mixing html in the middle of the PHP, making things a big messier or bloated, etc).

Overall, code example would be great showing how it is done basically, as I asked originally.
0
Giovanni HewardCommented:
I suppose you need to ask yourself if PHP is client-side or server-side?  Does it support GUI functions ??   Start there.
0
GaryCommented:
A bog standard js alert box will do that

if (confirm('Are you sure you want to do this?')) {
    // If yes
} else {
    // If no
}

Open in new window

0
GaryCommented:
Hmm after rereading you are getting confused about server side and client side and x66_x72_x65_x65 is basically telling you cannot do that ;o) and correctly so.
0
COBOLdinosaurCommented:
There is no pure PHP solution because PHP is a server side technology and has zero control or knowledge of what happens on the client unless the client sends the information.  You are not going to get something that does not require clent side code mixed with PHP, because the operation is on the client where there is no PHP.

You generate a javascript or jquery widget and you embed it in the markup where you need it with PHP. If you want the server to know about it right away you include a post to the server.

Cd&
0
Julian HansenCommented:
As mentioned above this is not something you can do in PHP. You can use PHP to generate the code - but ultimately the functionality is going to reside in a Javascript library.

The Dialog functionality in JQueryUI (http://jqueryui.com/dialog/) can do what you want.

Otherwise straight JQuery would require something like this
<!doctype html>
<html>
<head>
<style type="text/css">
body, html {
    min-height: 100%;
    font-family: arial;
}
* {
    margin: 0;
    padding: 0;
}
#overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000;
    opacity: 0.9;
    filter: alpha(opacity=90);
}
#dialog {
    position: absolute;
    left: -9999px;
    width: 25%;
    margin: 0 auto;
    padding: 10px;
    background: #efefef;
    color: #444;
    border: 2px solid #888;
    z-index: 1000;
}
a.close {
    display:block;
    position: absolute;
    top: 1px;
    right: 1px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
    padding: 1px 2px;
    background: #fefefe;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="dialog"><a href="#" class="close">x</a><div class="content"></div></div>
<a href="Your Message Goes Here" class="open-dialog">Click to open</a>
<p>Some content to fill up the page</p>
<p>Some content to fill up the page</p>
<p>Some content to fill up the page</p>
<p>Some content to fill up the page</p>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('.open-dialog').click(function(e) {
        e.preventDefault();
        $('#overlay').show();
        $('#dialog div.content').html($(this).attr('href'));
        var left = ($(window).width() - $('#dialog').width()) >> 1;
        var top = ($(window).height() - $('#dialog').height()) >> 1;
        $('#dialog').css({left: left + 'px', top : top + 'px'});
    });
   $('a.close').click(function(e) {
      $('#dialog').css({left: '-999px'});
      $('#overlay').hide();
   });
});

</script>
</body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RJVAuthor Commented:
I am looking at what the user sees. Are you saying that the code that currently displays in the browser won't display if I want to display a window in the middle of it to get an answer? That sounds a bit strange. In other words, it can't be done but only in a very simple manner? If that's the case I'd be quite amazed and surprised. But then, if that is the only solution I'd have to bow to the experts.
0
GaryCommented:
Your question sounds like you want to get a response inside your PHP code before you decide what to do next.
You cannot do that - PHP can only respond to posted data (on the server)
You can use ajax to get more data from the server depending on what the user wants.
0
Julian HansenCommented:
I am looking at what the user sees.
What the user sees is what the user can interact with. User can't see the PHP code and therefore cannot interact with it other than going through the HTML / Javascript interface.

PHP provides the server logic for rendering "what the user sees" - but once it is done it has no more control until a request comes back to the server - either clicking a link or as Gary says - through an AJAX call.
0
RJVAuthor Commented:
There's something wrong around here! I answered the question, clicked on submit, and was shown the logon screen again... and my answer went up in smoke! I just hope my solution doesn't do that.

Anyway, JulianH, thanks for showing something. I do realize that you need more than pure PHP. One example I've seen is this: http://simplemodal.plasm.it/. The problem with that solution plus what Julian said is:

  1. How do it display that and get response from the existing PHP code
      (after inserting into it)?
  2. The solution I linked to lets the user click outside the dialog without
       getting that user's answer.

Overall, I'm glad things are heading to a solution!
0
Julian HansenCommented:
I provided some code as a background - but take a look at JQueryUI - it is pretty comprehensive.
0
Dave BaldwinFixer of ProblemsCommented:
Worst of all, "that the person cannot click outside the dialog to close it".  I'd never go back to your site to let you 'kidnap' my browser again.
0
COBOLdinosaurCommented:
I think you may not understand how disconnect the client and server are.  Everything on the web uses the HTTP protocol which does not maintain state.

perhaps Ray's article on HTTP will help you.

Cd&
0
RJVAuthor Commented:
Here is my question with respect to your thoughts, Julian. To illustrate a bit better, say:

    if ($xinfo==1) {
    //  display dialog to get user input -- how to do that?
    //  Question here? How to continue below or where, based on reply
    }
    else {
    // whatever
    }

Now Dave, I do like your humor! Hey, how come you use a computer? Dialogs kidnap the whole thing all the time. Of course, you can always answer, or turn the computer off -- or close the browser.

Ray, it does help refresh relationships of how things work. Having to deal with this, C++, hexadecimal coding and the like, it helps make sure one's mind isn't too muddled.
0
GaryCommented:
As we have all said
You cannot do that.

(Assuming you are talking about php code in your comment)
0
RJVAuthor Commented:
No, Gary. The comment could be anything, whatever is acceptable by PHP. Is it possible to have a short script to display something or do you have to load something else? (I hope not html directly as that would be very restrictive).
0
Dave BaldwinFixer of ProblemsCommented:
I wasn't joking, I consider that bad behavior on a web site.  Not quite as bad as trying to prevent someone from leaving your web site but almost.
0
Ray PaseurCommented:
+1 for what DaveBaldwin said here and here.  Don't design a bad UX!   Even if someone tells you how to do it, just don't do it.  It's not worth the reputation you will get for something like this.
0
RJVAuthor Commented:
Ray, the goal is anything but. While my only objective is to get an objective answer to my original question, wouldn't you agree that possibly the worst thing that can happen to a user is for strange things to happen when doing whatever they are doing? In other words, click outside and your code just presumes that person has canceled, or something even worse, for not having a proper reply and behaving accordingly? I don't know about you, I have often want to hang someone when I watch strange reactions, right up to closing the application. Worse, crashing the whole computer because someone did not take the time to check for memory leaks.

So while I'll think about Dave's thought, I certainly will think about the above which to me is the most serious of the issues Dave mentioned.

That said, what would go here?

    if ($xinfo==1) {
    //  display dialog to get user input -- how to do that?
    }

I presume that from there start from scratch, loading another file or similar?
0
Dave BaldwinFixer of ProblemsCommented:
This is the way it works, Always.  Your PHP generates a page and sends it to the browser And it is Done, that PHP code is no longer running on the server.  

In the page sent to the browser, now independent of the server and PHP, you can use javascript or jQuery to put up anything you want on the screen.  You can put up a 'modal window', a pop-up, or one of those follow the cursor graphics but it will not have anything to do with the original PHP code.  

If you want to access another PHP page or code on the server while the page is in the browser, you can use AJAX to make a request to the server and have PHP (a different PHP code) return something to the browser to be used by the javascript/jQuery AJAX routine.
0
RJVAuthor Commented:
Overall, I'm glad these exchanges helped put me straight. No matter many yearly moons have gone by with me, I always feel that I am a beginner. That way there's a chance that I learn a bit more, while the info around me grows exponentially.

That said, from your input now, Dave, and your explanations which I accessed, Ray, it reminded me once more that the PHP chews things up on a server and spits them out to the client. For the client to respond, it needs to have a script to do its thing, which is what I was essentially asking about: how to include that in the PHP so it might get that to the client. For that, Julian, you came out with a suggestion.

Once the client displays something, the underlying code is still the same. So if the user does not respond to something on the dialog and that dialog simply closes without a user response, the previous code still prevails without the need for any refreshing.

Overall, I will further add with the objective to help others that might trip across this here, that we are not in a Cobol world where code starts at the beginning and finishes at the end. Today computers and devices are message and event driven. Within the http or web framework, that would be more event driven.

So the server sends stuff to the client and that is displayed there. If something happens in processing the code on the PHP server, it sends a script for the user to deal with it. As the same time, the user on the client might be doing something and that generates an issue on the client. Then the client would take it upon itself to display that issue to the user so the user might decide what to do. That decision would generate an event and then the script would communicate with the PHP service to deal with it, or not.

This brings me to why I am here in the first place. Let me illustrate one of the issues I need to rectify in existing PHP code. Today that code, though a client script, lets the user select an image and add some comment to it. Easy, right? Not entirely. The problem is that due both to server storage and bandwidth issues, the serer will only accept images with less than 700 kbytes. If the user picks something larger what does the code do today? It just ignores everything that was done and essentially sends everything the user did into oblivion. Translated: all of the user's work is lost, however large or small that would be, with no warning at all.

I don't know what you guys think but I think that is absurd. The user should be told that the file is too large and have the option to resize that image and then include it, or else include another image or else cancel and simply get out. Yes, the there might be some code in there to do the resizing before sending to the server (which currently is not the case), but even then, the user should be told this.

Now, in that situation (without resizing capabilities) I can let the user click outside the dialog and then the whole process gets aborted (or warn that it will be aborted, which is a lot of messages to the user), or force the user to press Cancel or Okay. Which would you guys thinks is the more civilized and friendly solution?

There are some other problems similar to these, and most can be dealt with just by clicking outside the dialog without the risk that the user might leave that calm being outside the door.

Any suggestions as to how to best include scripting code to enable the user to do some deciding, beyond what currently was given here (above) would be greatly appreciated. Even then, thanks to everyone's help, I'll close this shortly and also hope that this question may help others as well!
0
GaryCommented:
I'm losing the will to live.
To prevent large image uploads there are a number of javascript plugins you can use to check the size and prevent the upload.
If you have jquery then there are some very nice upload plugins.
0
Dave BaldwinFixer of ProblemsCommented:
Other than finding a new host that allows larger file uploads, you have to write or find someone else's code that performs the 'magic' that you want.  I mean none it just 'happens', if you didn't write it, someone else did.
0
Giovanni HewardCommented:
how to include that in the PHP so it might get that to the client.

... and that brings us back to :

<?php echo '<script>var r=confirm("Press a button!");if (r==true){alert("You pressed OK!");}else{alert("You pressed Cancel!");}</script>'; ?>

Open in new window


:0)
0
RJVAuthor Commented:
Please Gary, do keep that will high up there. If anyone should feel like you it should be me. Someone developed that PHP for which I paid for and it does exactly what you say. The only problem, it does it and then doesn't let the user know that the image size was rejected. So the user loses whatever was done up to then. My strength isn't PHP but C++ and I would never handle it that way. So best I can do is fix it as I'm not about to wait for the PHP developer to do it.

Dave, all hosts let you upload whatever you want. However, they all restrict bandwidth and even storage space. If you know of anyone who doesn't hey, give me a yell. Even a whisper. I'll certainly hear you!

x66, yep. Best making it look nice, don't you think?
0
GaryCommented:
To restrict image upload sizes then you need to look at the javascript options, most of them have the option of restricting the size of the upload and that is before it even gets to your server.
Forget about PHP - it cannot do this.
0
Dave BaldwinFixer of ProblemsCommented:
I just checked a number of hosting servers and the minimum 'post size' I found was 8MB with some as high as 33MB.  But you can also run into another problem and that is that images are uncompressed in order to work on them.  Typically you need an amount of ram 3 times the Uncompressed size of an image to process it.  It would not be unusual for the uncompressed image to be 10 times the size of the JPG file that it came from.
0
RJVAuthor Commented:
Gary, you're right. It's not done with PHP. I should've said that PHP and client scripts, which is what handles that in the messy way I described.

Dave, I've still drying the tears. Yeah, it ain't as brilliant as one imagines it to be. Furthermore, they're those who will just upload some "magnificent" raw images, which could get you into quite a few megs per image!
0
Dave BaldwinFixer of ProblemsCommented:
I had a customer who insisted it could be done with his raw camera images and refused to use a program locally to resize them.  I had already created a test page to resize images and I found out that the host would not allow enough RAM for PHP to resize the images he wanted to send.  He also refused to move to a host that would allow it.  I gave up and didn't bother going back.
0
Giovanni HewardCommented:
For image manipulation I use ImageMagick.  Examples of resizing images may be found here.

Use something like PHP File Uploader (designed to work with up to 2GB files) or this for large upload sizes.  Once the file is received, resize/manipulate via ImageMagick.
0
Ray PaseurCommented:
You might consider writing a flash application to run as a plug-in on the browser.  I believe that flash can access the files, determine the file sizes, etc.
0
Julian HansenCommented:
You might consider writing a flash application to run as a plug-in on the browser.
<rant>Flash pollution has become prolific - having done a fair amount of develpment with Flash any respect I had for Adobe has dwindled to practically nothing</rant>

If you are willing to embrace the HTML5 (and ignore <rant>IE (...deleted)</rant>) then you could use this client side
document.getElementById("fileInput").files[0].size;

Open in new window

Full sample here
<!doctype html>
<html>
<head>
<style type="text/css">
body, html {
    min-height: 100%;
    font-family: arial;
}
* {
    margin: 0;
    padding: 0;
}
#overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #000;
    opacity: 0.9;
    filter: alpha(opacity=90);
}
#dialog {
    position: absolute;
    left: -9999px;
    width: 500px;25%;
    margin: 0 auto;
    padding: 10px;
    background: #efefef;
    color: #444;
    border: 2px solid #888;
    z-index: 1000;
}
a.close {
    display:block;
    position: absolute;
    top: 1px;
    right: 1px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
    padding: 1px 2px;
    background: #fefefe;
}
#dialog form {
    margin: 20px 0;
    font-size: 12px;
}
label {
    font-size: 18px;
}
input {
    border: 1px solid #e7d8e6;
}
div.action-div {
    margin: 15px 0 0;
    line-height: 30px;
    text-align: right;
}
h2 {
    color: #7d8e6e;
}
input[type=submit] {
    color: #7d8e6e;
    background: none;
    font-size: 18px;
    padding: 4px 10px;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="dialog">
    <a href="#" class="close">x</a>
    <div class="content">
        <h2>File Upload</h2>
        <form>
            <label>File Please:</label> <input type="file" id="fileInput" /> (Max: Size 700Kb)
            <div class="action-div"><input type="submit" /></div>
        </form>
    </div>
</div>
<a href="Your Message Goes Here" class="open-dialog">Click to open</a>
<p>Some content to fill up the page</p>
<p>Some content to fill up the page</p>
<p>Some content to fill up the page</p>
<p>Some content to fill up the page</p>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('.open-dialog').click(function(e) {
        e.preventDefault();
        $('#overlay').show();
        var left = ($(window).width() - $('#dialog').width()) >> 1;
        var top = ($(window).height() - $('#dialog').height()) >> 1;
        $('#dialog').css({left: left + 'px', top : top + 'px'});
    });
   $('a.close').click(function(e) {
      $('#dialog').css({left: '-999px'});
      $('#overlay').hide();
   });
    $('form').submit(function(){
        var size = document.getElementById("fileInput").files[0].size;
        if (size > 700*1024) {
            alert('File too big. Must be no more bigger as 700kb. Please you fix');
            return false;
        }
    });
});
</script>
</body>

Open in new window

Working sample here
0
RJVAuthor Commented:
Thanks for the flash code, Julian. However, I wouldn't use it as it isn't good in the mobile world as it is not supported by Apple.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.