The Spirit Posted March 24, 2011 Posted March 24, 2011 I want to create a popup welcome message for the first time a user logs in. Im stuck on how to get the pop up working. I wanted to use this: http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ Can you call it using a php if statement? This is what I have so far. if($ir['timesloggedin'] == 0) { print" Welcome Messgae Here!"; } mysql_query("UPDATE `users` SET `timesloggedin`=`timesloggedin`+1 WHERE `userid`=$userid"); Thanks. Quote
Djkanna Posted March 24, 2011 Posted March 24, 2011 You'll need to change the isset ($_GET['yup']) to what's needed. Basically, create an empty div (or put content in the one that's wanted to popup) then only add the class if it's their first run. The js will check if the div#welcomeMessage has the class of popup_block if so it will continue with the popup. The only relevent bits are the php/div/css/js the other html is just there from a C+P job. <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <!--<link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">--> <link rel="stylesheet" href="css/style.css?v=2"> </head> <body> <?php if (isset ($_GET['yup']) ) { echo '<div id="welcomeMessage" class="popup_block">'; } else { echo '<div id="welcomeMessage">NO POP UP</div>'; } ?> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script> <script> if ( $('#welcomeMessage').hasClass('popup_block')) { var width = 500, con = $('#welcomeMessage'); con.text('Some welcome message goes here'); $(con).fadeIn().css({ 'width:': width }).prepend('[url="#"][img=close_pop.png][/url]'); var popMargTop = ($(con).height() + 80) / 2, popMargLeft = ($(con).width() + 80) / 2; $(con).css({ 'margin-top': -popMargTop, 'margin-left': -popMargLeft }); $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //fade them both out }); }); } </script> </body> </html> [css]#fade { /*--Transparent background layer--*/ display: none; /*--hidden by default--*/ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block{ display: none; /*--hidden by default--*/ background: #fff; padding: 20px; border: 20px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; /*--CSS3 Box Shadows--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; }[/css] All of it belongs to that tutorial posted above, just changed bits around. Have fun. Note: Just a quick two minute job, could have been done more efficiently but that's for you to play with, this works but you can make it better if you wish to do so. Quote
The Spirit Posted March 24, 2011 Author Posted March 24, 2011 Thanks a million Djkanna :thumbup: Got it working the way I wanted :) The only problem I have now is that when the message popsup the other content under the popup disappears? Thanks! Quote
Djkanna Posted March 25, 2011 Posted March 25, 2011 Thanks a million Djkanna :thumbup: Got it working the way I wanted :) The only problem I have now is that when the message popsup the other content under the popup disappears? Thanks! I'm thinking its supposed to, due to the overlay of black. When the popup is closed does your content come back again? Quote
The Spirit Posted March 25, 2011 Author Posted March 25, 2011 The overlay just kinda shadows the background but you can still see the mainmenu header etc. When the popup is closed the overlay fades away but theres no content on the page. On second view of the page when the popup doesnt come up the content is there. Quote
Djkanna Posted March 25, 2011 Posted March 25, 2011 If you just copied and pasted the divs in "<div id="welcomeMessage" class="popup_block">" - close it. (my bad) Quote
The Spirit Posted March 25, 2011 Author Posted March 25, 2011 I should of really got that o.O Thanks! looks & works great :) Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.