I need to get this Jquery box to appear on page load. Right now it only appears when the user clicks a link.
Here is the trigger:
<script type="text/javascript">
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
Im sure there must be some sort of solution here, any ideas?
You can fire click event on the necessary link
$(window).load(function() {
$('a#initialModalLink[name=modal]').trigger("click");
});
Where initialModalLink is id of the link that should execute modal window. Also (and it would be better) you can extract modal window opening into separate function and use it:
function openModal(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
}
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
openModal($(this).attr('href'));
});
openModal('the href of initial modal box');
});
code running with the function close:
function openModal(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
$('.window .modalClose').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
}
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
openModal($(this).attr('href'));
});
openModal('#modalDialog');
});
Sure, you just need to know what href to send. You can extract the modal function like this and call it when needed:
var modal = function(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
e.preventDefault();
modal($(this).attr('href')); // this might be a typo, should be id?
});
// fire the modal on load
modal('http://display.me/in/modal/');
});
Related
I am using model popup. when i click on close, i want to close the current popup n want open a new popup.. is it possible? i am using below javascript..
Please help me..
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow");
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/8-$(id).height()/8);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').fadeOut(1000);
$('.window').fadeOut();
});
//if mask is clicked
//$('#mask').click(function () {
//$(this).fadeOut(1000);
//$('.window').fadeOut();
// });
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/8 - box.height()/8);
box.css('left', winW/2 - box.width()/2);
});
});
I am working with one of the jQuery Modal Window as shown in this tutorial.
It works fine with the basic example but when i make changes to show the Modal window on page load then it does not work, It even blocks the link Simple Modal Window from showing popup modal if clicked on.
I have example on jsFiddle
I am not sure what i am doing wrong.
I simply want simple modal window to show up on page load event.
launchWindow('#dialog'); // does not work as shown in that tutorial
Try with this: http://jsfiddle.net/HJUZm/
you have that on click of the <a> just removed that.
$(document).ready(function() {
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
In your code it is missing the function launchWindow(). This is the function:
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height());
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
Check out this it works on page load as u described
Fiddle
Here simply I have removed `$('a[name=modal]').click(function(e) {` });
and has set var id = $('#link').attr('href'); where link id is id of the tag
launchWindow(..) is not defined in your javascript.
instead try this:
$('a[name=modal]').click();
$(document).ready(function() {
var id = "#dialog";
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn('fast');
$('#mask').fadeTo('fast');
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn('fast');
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').fadeOut();
$('.window').fadeOut();
});
//if mask is clicked
$('#mask').click(function () {
$(this).unhide();
$('.window').unhide();
});
});
why do you need a setTimeout? what are you trying to achieve? A little more info is required if you would like a useful response.
add everything you have in your $(document).ready to another function say showDialog() .
then in $(doc).ready add:
var myTimeout = setTimeout(showDialog,20000);
Here's one way:
$(document).ready( function(){
(function delayedModal(){
var id = '#dialog';
// ...snip...
var timer = setTimeout( function(){
$(id).fadeIn('fast');
},20000);
}());
// ...snip...
});
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=popup]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
can i change the popup window below the a href tag(top:dom?+20px) and not center??
You can change your top to this:
$(id).css('top', $(this).offset().top + 20);
.offset() returns the position of the clicked link, and you want the top value, this returns the top of the clicked link, so you may want to add it's height as well, e.g.:
$(id).css('top', $(this).height() + $(this).offset().top + 20);
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=popup]').click(function(e) {
//Cancel the link behavior
//e.preventDefault(); //return false handles this
//Get the A tag
var id = $(this).attr('href');
var position = $(this).position();
//Set the top value to be 20px from the top
$(id).css('top', (position.top + 20) + 'px');
return false;
}
});
http://api.jquery.com/position/
I'm using a script that greys out the background with a #mask element and centers my .memError message on the screen. The problem is that my site styles both the body and the html elements-- body is fixed-width and centered within the html element. When I use the script below, the #mask and .memError message are both positioned relative to the body element. How can I position them relative to html instead?
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("normal", 0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$('.memError').css('top', winH / 2 - $('.memError').height() / 2);
$('.memError').css('left', winW / 2 - $('.memError').width() / 2);
Why not use jmodal or another jquery plugin that builds a modal dialog for you?
have you set top & left position to zero?
$('#mask').css({
'width': maskWidth,
'height': maskHeight,
'left': 0,
'top': 0
});
but, why don't you give blockUI plugin a try?