[Solved] qTip 1.0rc3 modal worked once only

[FBL]

Hi,

Can you help with this code, I copied it from your site.
I have tried it in 4 different browsers and the results are the same.

i am using qTip 1.0. i can't change to v2.0 as other codes are dependent on it. I tried the conversion on the old codes, but most won't work. So I am stuck with 1.0rc3

It grey-ed out the page but no modal box shows. The modal box showed only once.

It worked only once and refused to work after.

JS Code

$('a[rel="modal"]').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: 'click', // Show it on click
			         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

HTML

JS Code

echo "<div class=\"qtip\">
<a rel=\"modal\" href=\"#\">Click here</a></div>";

[Craig]

Don't use the .qtip class for other elements except qTip!!! It will cause big problems, especially in the 1.0 releases. Other than that, here's the proper code conversion so you can use qTip2 (not sure why it didn't work in the converter for you...):

JS Code

$('a[rel="modal"]').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),
		my: "center",
		at: "center"
	},
	show: {
		solo: true,
		event: "click",
		modal: true
	},
	hide: false,
	style: {
		classes: "ui-tooltip-light"
	}
})

CSS Code

.ui-tooltip-light {
	max-width: 350px;
	padding: 14px;
	border-width: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	border-color: #666666;
}