Simple jQuery Modal Window not showing popup on page load - javascript

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();

Related

DataTables vertical page fitting on window resize

Following the Vertical Page fitting blog on DataTables https://datatables.net/blog/2015-04-10, I'm trying to setup my table the same way but using the window resize event. Here's what i'm doing,
<script>
var prevHeight = 0; //for storing the previous height of the window
$(document).ready(function() {
prevHeight = $(window).height(); //get the current height of the window on load
});
$(window).on('resize', function(e){
var currentHeight = $(window).height(); //height of the window after resize
var wrapper = $('.resize_wrapper'); //div containing the table
var resizeStartHeight = wrapper.height(); //height of the wrapper
var height = resizeStartHeight + (currentHeight - prevHeight); //new height for the wrapper
if ( height < 180 ) { //setting a minimum height
height = 180;
}
wrapper.height( height ); //set the new height for the wrapper
prevHeight = $(window).height(); //store the new height of the window
});
</script>
The table container is resizing, my table page length is changing. So far this code works but I can't seem to figure out what i'm missing because there's still a huge blank area under my table. There's nothing else under there, my table/div is the last element on the page.

close popup and open new popup

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);
});
});

where do i insert setTimeout() in the above script? since var id="#dialog"; is the div that is shown when the page is loaded

$(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...
});

Get Jquery modal box to appear on page load

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/');
});

Jquery: How can I set a modal dialog to display centered relative to html instead of body?

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?

Categories