code tooltip

by Aakash Chakravarthy

HTML

<a class="popup" href="#">dasdasas</a>

<div class="pop">
    <input type="text" />
</div>

<h2>4. Launch modal window with Javascript</h2>

<p>Due to popular demand :), I have an example for it. The concept is simple. I wrapped the modal window script inside a function, and then you will able to call the modal window using javascript function call.</p>

<p>Yes, you will able to load the modal window on page load as well :)</p>



<pre name="code" class="javascript">

$(document).ready(function () {

  //id is the ID for the DIV you want to display it as modal window

  launchWindow(id); 

});

</pre>



<p><strong><a href="http://www.queness.com/resources/html/modal/jquery-modal-window2.html">Launch Modal Window with Javascript</a></strong></p>



And, if you want to close the modal window on key press, any keys you want, you can add the following function.



<pre name="code" class="javascript">

$(document).keyup(function(e) {

  if(e.keyCode == 13) {

    $('#mask').hide();

    $('.window').hide();

  }

});

</pre>



I think I should make another post about modal window. :)



<h2>5. Conclusion</h2>



<p>Yes, that's all you need to make a simple jquery modal window. In this tutorial, it shown you the concept of how to display DIV content inside a modal window. However, you can further develop it to accept a link and display it in an iFrame and image gallery.</p>



<p>For those who's looking for a fully customizable Modal Window, you can try my method, if you have any other questions, please let me know. Thanks for reading.</p>



<h2>Update</h2>

<p>

<b>22-5-2009:</b>

- Added a new section "Activate modal window with Javascript"

</p>

<p>

<b>16-4-2009:</b>

- If you prefer this article in Portuguese, please visit <a href="http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/">Simple jQuery Modal Window in Portuguese by Maujor</a></b><br/>

</p>

<p><b>27 Mar 09:</b> 

- Added e.preventDefault() to link to launch the modal window.<br/>

-...

CSS

.pop{
    position:absolute;
    z-index:9999;
    color:#fff;
    font-size:11px;
    background: #333333;
    padding: 5px;
    -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.09);
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.closeBt{
    float:right;
}

JavaScript

$('a').click(function(e){
    e.preventDefault();
    $(this).after('<div class="pop"><span class="closeBt">x</span><input type=text /></div>');
    
     var rx = e.pageX;
    var ry = e.pageY ;
    
    $('.pop').css({
        'left' : rx -16,
        'top' : ry -16,
    });
    
});