/    Sign up×
Community /Pin to ProfileBookmark

Modal window on web site?

I am looking for a *easy to use* modal window for my website. I’m not a professional so the emphasis must be on easy to get my head around and use.

As I envisage it, I have a number of input forms which pass search criteri ao php programs which execute a mysql search, then return formatted data. I want this formatted data to appear in a modal window with a defined size, and vertical scrolling if the data overflows.

Any advice from out there? I’m banging my head against a wall in here…

Cheers

D

to post a comment
HTML

18 Comments(s)

Copy linkTweet thisAlerts:
@eval_BadCode_Aug 14.2010 — I actually have something like this coming up in a job.

There's a few tricks to make the background appear transparent.

But you'll probably want to use zindex, transparency, (background-color:transparent w/ an opaque png bg-image), overflow, and put that into a 3x3 html table, scale it however you want. But make use of min-width, max-width, width, min-height, max-height, height etc.

The issue is even though it looks like the background functions have been disabled and you have to interact with the child window first, they likely aren't and you would have to go through and make sure that whatever triggers the modal window also triggers the other functionality to stop. Otherwise you may get some wise guy trying to break your site, or break into, just a tip.

best of luck to you.
Copy linkTweet thisAlerts:
@DaveB2authorAug 14.2010 — Cheers, and thanks for the reply. I thought that greybox was pretty much what I was looking for, but I couldn't find out where or why it was losing the superglobals somewhere in its code <sigh>. And the developer has gone to ground.

Life's a beach sometimes...
Copy linkTweet thisAlerts:
@eval_BadCode_Aug 14.2010 — I don't entirely understand what you're asking, but if you're talking about javascript. You can always use a new column with 0/1 (or boolean) to determine the visibility of the html table (on some sql table). Otherwise everyone would load the html table (write it out in html, not php) and it would either be "display:none;" or "display:visible", and just add an inline rule for the target table's ID and use php to fill in the display property.

I dont entirely understand what you mean by <code> since you're probably dealing with javascript, html, css, php, and sql- which makes <code> ambiguous.

Best of luck.
Copy linkTweet thisAlerts:
@DaveB2authorAug 15.2010 — hanks for the reply.

Yes it was ambiguous, sorry about that, I was really just musing rather than presenting a serious question, but that wasn;t clear either :o

The html code in the web page is this:

<form name="name" action="searchscripts/search_last_name.php" method="post" [COLOR="DarkRed"]onsubmit="return GB_showCenter('Search results', this.action, 320, 640)"[/COLOR]>

<input type="text" name="last_name" />

<input type="submit" name="Submit" value="Search" />

</form>

The form calls a php script which

  • 1. Retrieves the POST variable 'last_name' search

  • 2. Searches the database

  • 3. Returns the result through the greybox GB_show function (javascript) for display in modal window.


  • The process is, however interrupted by the greybox js scripts, which appear to null out the superglobals $_GET, $_POST, $_REQUEST, which makes retrieval of the search key difficult or impossible, so the search fails.

    I'm pretty sure where this is happening (in the greybox js code) because if I remove the 'onsubmit' part of the form code, all is well and my php script returns the data query correctly. But not in the desired modal window of course.

    All very odd and beyond my ken entirely. I may need to go the route you suggest - beyond my reach as an amateur with only bits and pieces of knowledge though.

    Cheers, and thanks very much for the assistance ?
    Copy linkTweet thisAlerts:
    @rickyduckAug 17.2010 — hanks for the reply.

    Yes it was ambiguous, sorry about that, I was really just musing rather than presenting a serious question, but that wasn;t clear either :o

    The html code in the web page is this:

    <form name="name" action="searchscripts/search_last_name.php" method="post" [COLOR="DarkRed"]onsubmit="return GB_showCenter('Search results', this.action, 320, 640)"[/COLOR]>

    <input type="text" name="last_name" />

    <input type="submit" name="Submit" value="Search" />

    </form>

    The form calls a php script which

  • 1. Retrieves the POST variable 'last_name' search

  • 2. Searches the database

  • 3. Returns the result through the greybox GB_show function (javascript) for display in modal window.


  • The process is, however interrupted by the greybox js scripts, which appear to null out the superglobals $_GET, $_POST, $_REQUEST, which makes retrieval of the search key difficult or impossible, so the search fails.

    I'm pretty sure where this is happening (in the greybox js code) because if I remove the 'onsubmit' part of the form code, all is well and my php script returns the data query correctly. But not in the desired modal window of course.

    All very odd and beyond my ken entirely. I may need to go the route you suggest - beyond my reach as an amateur with only bits and pieces of knowledge though.

    Cheers, and thanks very much for the assistance ?[/QUOTE]


    Off topic here but I would not use the onSubmit function (maybe I'm being perdantic). I would use a library to process what you are doing as it would make it a lot easier, EG jQuery, for which you can use:

    $('form').submit(function(){

    });

    If you post your code for the GB_showCenter function I will rewrite it to jquery for you, and also greybox isnt the nicest of lightboxes (not just appearance wise). Search for a jQuery lightbox.. believe me, jQuery is not hard at all and will improve your client side coding tenfold.
    Copy linkTweet thisAlerts:
    @criterion9Aug 17.2010 — Off topic here but I would not use the onSubmit function (maybe I'm being perdantic). I would use a library to process what you are doing as it would make it a lot easier, EG jQuery, for which you can use:

    $('form').submit(function(){

    });

    If you post your code for the GB_showCenter function I will rewrite it to jquery for you, and also greybox isnt the nicest of lightboxes (not just appearance wise). Search for a jQuery lightbox.. believe me, jQuery is not hard at all and will improve your client side coding tenfold.[/QUOTE]


    That particular bit of code using jQuery is also adding an onsubmit handler to the form element. There is no difference except that you would then have to include the huge library (relative to 0 of course) file in your bandwidth requirements.
    Copy linkTweet thisAlerts:
    @rickyduckAug 17.2010 — That particular bit of code using jQuery is also adding an onsubmit handler to the form element. There is no difference except that you would then have to include the huge library (relative to 0 of course) file in your bandwidth requirements.[/QUOTE]

    I think though, for one call of a library, it can reduce execution time and also if more javascript is used down the line it will reduce development. I wouldn't call 24kb huge.. I think when the function is fully built then 24kb is not much, besides, jQuery lightbox is only 7 kb packed while greybox is 22. Why are you advising him not to use jQuery? It wont have any detrimental effect at all.

    No point causing an argument over something which doesnt need to be argued about ?
    Copy linkTweet thisAlerts:
    @criterion9Aug 17.2010 — I think though, for one call of a library, it can reduce execution time and also if more javascript is used down the line it will reduce development. I wouldn't call 24kb huge.. I think when the function is fully built then 24kb is not much, besides, jQuery lightbox is only 7 kb packed while greybox is 22. Why are you advising him not to use jQuery? It wont have any detrimental effect at all.

    No point causing an argument over something which doesnt need to be argued about ?[/QUOTE]


    My point was only that there is no need to include the whole 24kb for that single line when 0kb does the same thing. If there is other use for the library then that is a different matter entirely. The only issue I have with the frameworks is when someone doesn't understand the basics of javascript and uses a framework as a "magic" solution. When used improperly any framework can slow the loading of a site or in worst case cause errors due to inadequate understanding of basic concepts.
    Copy linkTweet thisAlerts:
    @aj_nscAug 17.2010 — I think when the function is fully built then 24kb is not much, besides, jQuery lightbox is only 7 kb packed while greybox is 22.[/QUOTE]

    22<24+7

    Second criterion's thoughts on this.
    Copy linkTweet thisAlerts:
    @rickyduckAug 17.2010 — My point was only that there is no need to include the whole 24kb for that single line when 0kb does the same thing. If there is other use for the library then that is a different matter entirely. The only issue I have with the frameworks is when someone doesn't understand the basics of javascript and uses a framework as a "magic" solution. When used improperly any framework can slow the loading of a site or in worst case cause errors due to inadequate understanding of basic concepts.[/QUOTE]

    A fair point well made, I have no arguments against your point of when its used improperly it can be detrimental.
    Copy linkTweet thisAlerts:
    @DaveB2authorAug 18.2010 — Thanks for the responses guys, I really appreciate it.

    I chose greybox for 3 reasons: firstly the minimal frame design on screen, secondly the (to me) easily understandable means of calling the GB_showCenter function, and lastly (most importantly), because I can output data from a mysql search query, whereas many lightboxes are only for pics and galleries. Having wrestled with it for ages though, it seems buggy and temperamental so I am on the verge of SC'ing it.

    Before I take up Ricky's kind offer to write the code in jquery, do you have any suggestions as to a suitable alternative choice of lightbox? One that will display formatted data output from a database query?

    Really grateful for the assistance...
    Copy linkTweet thisAlerts:
    @rickyduckAug 18.2010 — Thanks for the responses guys, I really appreciate it.

    I chose greybox for 3 reasons: firstly the minimal frame design on screen, secondly the (to me) easily understandable means of calling the GB_showCenter function, and lastly (most importantly), because I can output data from a mysql search query, whereas many lightboxes are only for pics and galleries. Having wrestled with it for ages though, it seems buggy and temperamental so I am on the verge of SC'ing it.

    Before I take up Ricky's kind offer to write the code in jquery, do you have any suggestions as to a suitable alternative choice of lightbox? One that will display formatted data output from a database query?

    Really grateful for the assistance...[/QUOTE]


    Thats why I advised against it in the first place, I used it for exactly the same thing about a year ago and had to recode the whole thing. Does it have to be in a modal window?
    Copy linkTweet thisAlerts:
    @DaveB2authorAug 18.2010 — Probably doesnt have to be a modal window, truth be told, I just liked the semi-transparent and 'clean' lines of some of the LB packages. But my programming skill isn't really up to snuff, I'm much better as a therapist! ?

    Any suggestions for an alternative?
    Copy linkTweet thisAlerts:
    @criterion9Aug 18.2010 — Have you looked at thickbox?
    Copy linkTweet thisAlerts:
    @DaveB2authorAug 18.2010 — Thanks for the response. I looked at thickbox. It seemed a little 'thick' :-/ Plus I wasn;t sure if it could do the data display thing. Can it? How might I call it using a query input form and a php script?
    Copy linkTweet thisAlerts:
    @criterion9Aug 18.2010 — You can put just about any response from a PHP script into any other language (HTML, XML, Javascript, etc). After the PHP has process the "echo"ed code is sent as plain old human readable (in most cases) text just like a plain old html file would.
    Copy linkTweet thisAlerts:
    @DaveB2authorAug 18.2010 — You can put just about any response from a PHP script into any other language (HTML, XML, Javascript, etc). After the PHP has process the "echo"ed code is sent as plain old human readable (in most cases) text just like a plain old html file would.[/QUOTE]

    If you know how... I'm a dunce. How would you do it with thickbox? Perhaps I should play with it a bit more...

    Sorry to be such a numbskull :-(
    Copy linkTweet thisAlerts:
    @DaveB2authorAug 19.2010 — Just wanted to say thanks to all the responders. I appreciated your insights.

    RickyDuck, after you tried greybox out, what did you end up choosing?
    ×

    Success!

    Help @DaveB2 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.2,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...