Threaded Mode | Linear Mode

c0mrade

Referring to : http://craigsworks.com/projects/qtip/dem...ects/modal

I this this modal is nice and simple, here is one question that I see no one had asked so far, or perhaps I've not read the forum thoroughly. How do you enable this modal on body load .. like <body onload="some action"> instead of clicking on it to appear ?

Thank you

***Craig***

The best way to do this is to aply the tooltip to the document body and use the show.ready functionality (combine it with the code already present in the demo):

JS Code

$(document.body).qtip({
   show: {
      ready: true 
   }
});

c0mrade

Thank you for your answer Craig, I just can't get it working .. I'm really a newbie to jquery .. especially this advanced functionality that you use. I've tried several combinations with the code you wrote in previous post, can you help me a bit more? or if you're out of time .. link me to some jquery tutorials so I can work my way?

Thank you

***Craig***

No problem c0mrade. Here's the full code to get you going (hopefully, it's untested!):

JS Code

$(document).ready(function()
{
   $('a[rel="modal"]:first').qtip(
   {
      content: {
         title: {
            text: 'Modal qTip',
            button: 'Close'
         },
         text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! ' +
               'Much like the <a href="http://onehackoranother.com/projects/jquery/boxy/">Boxy</a> plugin, ' +
               'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
      },
      position: {
         target: $(document.body), // Position it via the document body...
         corner: 'center' // ...at the center of the viewport
      },
      show: {
         when: false,
         ready: true,
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 350 },
         padding: '14px',
         border: {
            width: 9,
            radius: 9,
            color: '#666666'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {
            // Fade in the modal "blanket" using the defined show speed
            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {
            // Fade out the modal "blanket" using the defined hide speed
            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });
 
   // Create the modal backdrop on document load so all modal tooltips can use it
   $('<div id="qtip-blanket">')
      .css({
         position: 'absolute',
         top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
         left: 0,
         height: $(document).height(), // Span the full document height...
         width: '100%', // ...and full width
 
         opacity: 0.7, // Make it slightly transparent
         backgroundColor: 'black',
         zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
      })
      .appendTo(document.body) // Append to the document body
      .hide(); // Hide it initially
});

c0mrade

tnx Craig, its working .. the black thing doesn't appear on the rest of the page with the code above .. but I browser trough the code than tried some changes and I hit it, just changed this line

JS Code

.hide(); // Hide it initially

to

JS Code

.show(); // Hide it initially

brilliant.. tnx a zillion

mattsyk

+1 for this - thanks!

I've found that using target: $(window) keeps it in the viewport. using target: $(document.body) makes it go in the middle of the body which is could be further down on a long page.

Also, I changed $('a[rel="modal"]:first').qtip(
to
$('body').qtip(

Which meant I didn't need to put a href with rel in - seemed to work but I had to be quick so worth more testing...

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	Dynamic content from page variables	kenswdev	0	418	9th February 18:06 Last Post: kenswdev
	Dynamic Content on first show, not page load	TheOverbob	6	6,951	2nd August 13:01 Last Post: Craig
	[Solved] Displaying tooltip on page load/mouseover otherwise	burghars	1	1,357	18th July 11:55 Last Post: Craig
	[Solved] modal with URL from another page?	dod	2	1,502	2nd May 19:07 Last Post: Craig
	Load an HTML Page Within qTip Tooltip	BruceBruce	3	3,337	19th January 12:17 Last Post: Craig
	Tutorial: Dynamic content on first load using ajax	Abrasive	0	4,826	28th June 05:44 Last Post: Abrasive
	how to load different content each time	andufo	1	1,845	28th May 16:00 Last Post: andufo
	close modal dialog from inside the content	siriusblack	3	2,508	21st April 17:57 Last Post: Craig
	Callbacks fire on page load when they shouldn't	anomalous	1	1,275	4th February 22:12 Last Post: anomalous
	Dynamically Loading Specifc Content from Page	ChuckLew	1	1,955	23rd November 00:13 Last Post: Craig