Menu

Popup using jquery

This jquery is used for popup.

for this you need to have three java script files.

1. you can download file from here. jquery-1.3.2.js

2. Here another file is called jquery-1.js you can copy code from here.
3. Here another file is called jquery.helper.js you can copy code from here.


//* simple modal plugin

jQuery.fn.showModal = function(options)
{
    return this.each(function()
    {
        var modalDiv = $('#modal');
        if (modalDiv.length == 0)
            modalDiv = $('<div id="modal" class="modalDiv"></div>').appendTo(document.body);

        //* you can remove this if you don't have to support IE6
        if ($.browser.msie &amp;&amp; $.browser.version == "6.0")
        {
            $('select').hide();
            modalDiv.css({ 'position': 'absolute', 'height': $(document).height() - 5, 'width': $(window).width() }).show();
        }
        else
            modalDiv.css({ 'position': 'fixed' }).show();

        var x = $(window).width() / 2 - $(this).outerWidth() / 2;
        var y = $(window).height() / 2 - $(this).outerHeight() / 2;

        $(this).css({ 'position': 'absolute', 'left': x + $(window).scrollLeft(), 'top': y + $(window).scrollTop(), 'z-index': '10001' }).focus().slideDown();
    });
};


jQuery.fn.hideModal = function (options)
{
    return this.each(function ()
    {
        //* you can remove this if you don't have to support IE6
        if ($.browser.msie &amp;&amp; $.browser.version == '6.0')
            $('select').show();

        $(this).slideUp(function() { $('#modal').hide(); });
    });
};

Now the CSS applied for this is below.


/* Modal div styles start */
.modalDiv
{
    position: absolute;
    z-index: 10000;
    background-color: Black;
    filter: alpha(opacity=70);
    opacity: 0.7;
    display: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}


/* Jquery Popup*/
#mask
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background-color: Black;
    display: none;
}
#boxes .window
{
    position: absolute;
    left: 0;
    top: 0;
    width: 600px;
    height: 400px;
    display: none;
    z-index: 9999;
    padding: 20px;
    background-color: White;
}
#boxes #dialog
{
    width: 600px;
    height: 600px;
    padding: 10px;
}
#boxes .window_ForgotPassword
{
    position: absolute;
    left: 0;
    top: 5;
    display: none;
    z-index: 9999;
    padding: 20px;
    background-color: White;
    height: auto;
    width: 400px;
}
/* End */

Now here sample HTML code is provided which will help you to make page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.3.2.js" type="text/javascript"></script>

    <script src="jquery-1.js" type="text/javascript"></script>

    <script src="jquery.helper.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="login4">
        <a href="#" onclick="$('#divSimplePopup').showModal(); return false;">Forgot Password?
        </a>
    </div>
    <div id="boxes" style="font-size: 12px; font-weight: bold;">
        <div id="divSimplePopup" class="window_ForgotPassword">
            <table width="100%" border="0">
                <tr>
                    <td colspan="2">
                        Title Of MsgPopup
                    </td>
                </tr>
                <tr style="height: 40px;">
                    <td>
                        Simple Msg Popup
                    </td>
                    <td>
                    </td>

                </tr>
                <tr>
                    <td>
                        <a href="#" onclick="$('#divSimplePopup').hideModal(); return false;">
                            <asp:Label ID="Rs_close" runat="server" Text="Close"></asp:Label>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

No comments

Leave a Reply


3 − = 2

Categories