if user not logged in on site trigger popup load without sending user off page. have been trying this code, cant work reason. mistake? million.
code: http://jsfiddle.net/gyeo03nk/1/
// popup window code $(document).ready(function () { // if user clicked on button, overlay layer or dialogbox, close dialog $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () { $('#dialog-overlay, #dialog-box').hide(); return false; }); // if user resize window, call same function again // make sure overlay fills screen , dialogbox aligned center $(window).resize(function () { //only if dialog box not hidden if (!$('#dialog-box').is(':hidden')) popup(); }); }); //popup dialog function popup(message) { // screen height , width var maskheight = $(document).height(); var maskwidth = $(window).width(); // calculate values center alignment var dialogtop = (maskheight/3) - ($('#dialog-box').height()); var dialogleft = (maskwidth/2) - ($('#dialog-box').width()/2); // assign values overlay , dialog box $('#dialog-overlay').css({height:maskheight, width:maskwidth}).show(); $('#dialog-box').css({top:dialogtop, left:dialogleft}).show(); // display message $('#dialog-message').html(message); }/* popup window ----------------------------------------*/ #dialog-overlay { /* set fill whil screen */ width:100%; height:100%; /* transparency different browsers */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; background:#000; /* make sure appear behind dialog box above else */ position:absolute; top:0; left:0; z-index:3000; /* hide default */ display:none; } #dialog-box { /* css3 drop shadow */ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */ -moz-border-radius: 15px; -webkit-border-radius: 15px; background:#eee; /* styling of dialog box, have fixed dimension demo */ width:328px; /* make sure has highest z-index */ position:absolute; z-index:5000; /* hide default */ display:none; } #dialog-box .dialog-content { /* style content */ text-align:left; padding:10px; margin:13px; color:#666; } /* styling */ #dialog-box .dialog-content p { font-weight:700; margin:0; } #dialog-box .dialog-content ul { margin:10px 0 10px 20px; padding:0; height:50px; }/* popup window ----------------------------------------*/ #dialog-overlay { /* set fill whil screen */ width:100%; height:100%; /* transparency different browsers */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; background:#000; /* make sure appear behind dialog box above else */ position:absolute; top:0; left:0; z-index:3000; /* hide default */ display:none; } #dialog-box { /* css3 drop shadow */ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */ -moz-border-radius: 15px; -webkit-border-radius: 15px; background:#eee; /* styling of dialog box, have fixed dimension demo */ width:328px; /* make sure has highest z-index */ position:absolute; z-index:5000; /* hide default */ display:none; } #dialog-box .dialog-content { /* style content */ text-align:left; padding:10px; margin:13px; color:#666; } /* styling */ #dialog-box .dialog-content p { font-weight:700; margin:0; } #dialog-box .dialog-content ul { margin:10px 0 10px 20px; padding:0; height:50px; }<div id="dialog-overlay"></div> <div id="dialog-box"> <div class="dialog-content"> <div id="dialog-message"></div> <a href="#" class="button-small">close</a> </div> </div> <a href="#" onclick="return popup('please log in');">a click here should launch popup? hmm</a>
try code.
instead of calling popup through html, i've called through jquery.
// popup window code $(document).ready(function () { // if user clicked on button, overlay layer or dialogbox, close dialog $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () { $('#dialog-overlay, #dialog-box').hide(); return false; }); // if user resize window, call same function again // make sure overlay fills screen , dialogbox aligned center $(window).resize(function () { //only if dialog box not hidden if (!$('#dialog-box').is(':hidden')) popup("hello"); }); //this modified code $('.login').click(function(){ popup('please log in'); }); }); //popup dialog function popup(message) { // screen height , width var maskheight = $(document).height(); var maskwidth = $(window).width(); // calculate values center alignment var dialogtop = (maskheight/3) - ($('#dialog-box').height()); var dialogleft = (maskwidth/2) - ($('#dialog-box').width()/2); // assign values overlay , dialog box $('#dialog-overlay').css({height:maskheight, width:maskwidth}).show(); $('#dialog-box').css({top:dialogtop, left:dialogleft}).show(); // display message $('#dialog-message').html(message); }/* popup window ----------------------------------------*/ #dialog-overlay { /* set fill whil screen */ width:100%; height:100%; /* transparency different browsers */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; background:#000; /* make sure appear behind dialog box above else */ position:absolute; top:0; left:0; z-index:3000; /* hide default */ display:none; } #dialog-box { /* css3 drop shadow */ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */ -moz-border-radius: 15px; -webkit-border-radius: 15px; background:#eee; /* styling of dialog box, have fixed dimension demo */ width:328px; /* make sure has highest z-index */ position:absolute; z-index:5000; /* hide default */ display:none; } #dialog-box .dialog-content { /* style content */ text-align:left; padding:10px; margin:13px; color:#666; } /* styling */ #dialog-box .dialog-content p { font-weight:700; margin:0; } #dialog-box .dialog-content ul { margin:10px 0 10px 20px; padding:0; height:50px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dialog-overlay"></div> <div id="dialog-box"> <div class="dialog-content"> <div id="dialog-message"></div> <a href="#" class="button-small">close</a> </div> </div> <a href="#" class="login">a click here should launch popup? hmm</a>
Comments
Post a Comment