Hello,
First i want to say thanks for this awesome piece of code!
So far used qTip for some text/phrase explanation.
But now i need to setup 3 modal views that will load within one page.
Every view should load content from separate div's.
So, 3 modals = 3 content divs.
I followed the docs and example on modal view, but I am not exactly sure how to make this work.
JS and me are enemies, so I will appreciate if someone pushes me in the right direction.
Thanks, escaper.
Escaper, are you talking about 3 different modal "styles"? or three different types of modal content?
(Today 16:16)dustmoo Wrote: [ -> ]Escaper, are you talking about 3 different modal "styles"? or three different types of modal content?
Let me clear this up a bit...
Lets say we have this.(i stole the code from an example :shy
HTML Code
<button class="nice">Click here</a> to see first modal dialogue</button>
<button class="nice">Click here</a> to see second modal dialogue</button>
<button class="nice">Click here</a> to see third modal dialogue</button>
<div class="first_modal_content">
This is the content for the first modal dialogue
</div>
<div class="second_modal_content">
This is the content for the second modal dialogue
</div>
<div class="third_modal_content">
This is the content for the third modal dialogue
</div>
And i am stuck at the JS part, i only got one button/modal dialogue to work and open properly.
Lots of ways to do this. You could:
- Put your tooltip content in the title attribute of the button tag (easiest if your content is simple text or very basic HTML).
HTML:JS Code
<button class="nice" title="This is the content for the first modal dialogue">Click here to see first modal dialogue</button>
<button class="nice" title="This is the content for the second modal dialogue">Click here to see second modal dialogue</button>
<button class="nice" title="This is the content for the third modal dialogue">Click here to see third modal dialogue</button>
JJS Code
$('button').qtip({
show: {
modal: true
}
});
- Manually display each qTip on demand with a .click() bind for each button. This can be tedious if you don't automate the binding somehow or use a common helper function, ie.
JS Code
function ShowDialog(contentContainer) {
$(this).qTip({
// init to use the contents of the specified
// container, show the tooltip when ready,
// and destroy it on the hide event
});
}
$('button#button1').click(function() {
ShowDialog('button1tooltipdivid');
});
$('button#button2').click(function() {
ShowDialog('button2tooltipdivid');
});
$('button#button3').click(function() {
ShowDialog('button3tooltipdivid');
});
- Use some sort of naming ID naming scheme that "links" buttons with the tooltip content divs. Similar to this example: http://jsfiddle.net/kiddailey/UyZnb/ but you could also expand the idea of a "showDialog" function above with this to simplify things
Hello, can you show a little example on how to do this? I'm kinda new to jQuery and for some reason everything I tried didn't work as it should.
Thanks in advance.