Jquery Message POP up in SharePoint 2010 webpart or Asp.net Pages

Required components :
jquery-1.4.2.min.js
jquery.simplemodel.js

jquey.msg

content  :

function confirmsuccess(message, pageurl, pagename) {

    $('#confirm').modal({
        close: false,
        overlayId: 'confirmModalOverlay',
        containerId: 'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);
            dialog.data.find('.headermessage').append(pagename);
            dialog.data.find('.No').click
                    (
                    function () {

                        $.modal.close();

                        var urlmsg = pageurl;

                        $(location).attr('href', urlmsg);

                    }
                    );

        }
    }
            );


}

function confirmalert(message, pageurl, pagename) {

    $('#confirm').modal({
        close: false,
        overlayId: 'confirmModalOverlay',
        containerId: 'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);
            dialog.data.find('.headermessage').append(pagename);
            dialog.data.find('.No').click
                    (
                    function () {

                        $.modal.close();

                        var urlmsg = pageurl;

                        $(location).attr('href', urlmsg);

                    }
                    );

        }
    }
            );

    document.getElementById("imgsuccess").className = 'headerimageerror';
}



function confirmformmsg(message, pagename) {

    $('#confirm').modal({
        close: false,
        overlayId: 'confirmModalOverlay',
        containerId: 'confirmModalContainer',

        onShow: function (dialog) {
            dialog.data.find('.message').append(message);
            dialog.data.find('.headermessage').append(pagename);

            dialog.data.find('.No').click
                    (
                    function () {

                        $.modal.close();
                        $(window.close());
                      

                    }
                    );

        }
    }
            );


}


function confirmformmsgerror(message, pagename) {

    $('#confirm').modal({
        close: false,
        overlayId: 'confirmModalOverlay',
        containerId: 'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);
            dialog.data.find('.headermessage').append(pagename);
            dialog.data.find('.No').click
                    (
                    function () {

                        $.modal.close();


                    }
                    );

        }
    }
            );
    document.getElementById("imgsuccess").className = 'headerimageerror';
}

function confirmmsgsave(message, pagename) {

    $('#confirm').modal({
        close: false,
        overlayId: 'confirmModalOverlay',
        containerId: 'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);
            dialog.data.find('.headermessage').append(pagename);
            dialog.data.find('.No').click
                    (
                    function () {

                        $.modal.close();


                    }
                    );

        }
    }
            );

}

CSS For POP UP:

.modaltopoverlink
{
    float: left;
    border-top: 1px solid #aaaaaa;
    width: 95%;
    margin: 0 0 0 10px;
}
.modalnewuser, .modalchangeuser
{
    float: left;
    margin-left: 15px;
}
.modalnewuser a, .modalchangeuser a
{
    color: Black;
}
/*#confirm .message
{
    color: green;
}
*/
#hfLogin
{
    color: #000000;
    text-decoration: none;
}
#hfLogin:hover
{
    text-decoration: underline;
}
#UserNameRequired, #PasswordRequired
{
    float: left;
}
.headermodal
{
    float: left;
    background: url(../images/modal.png) #cccccc repeat-x 50% 50%;
    height: 25px;
    width: 100%;
}
.headermessage
{
    float: left;
    margin: 3px 0 0 3px;
    font-weight: bold;
    font-size: 15px;
    font-style: italic;
}
.headerimage
{
    float: left;
    background: none;
  
    background-repeat: no-repeat;
    width: 80%;
    margin: 10px 0 0 10px;
    padding-left: 15px;
   z-index:4000px;
}
.headerimage .message
{
    float: left;
    width: 100%;
    color: #000000 !important;
    padding: 5px;
    text-align: left;
    margin-left: 10px;
    font-size: 15px;
}
.headerimageerror
{
    float: left;
    background: none;
  
    background-repeat: no-repeat;
    width: 80%;
    margin: 10px 0 0 10px;
    padding-left: 15px;
    z-index:10000px;
}
.headerimageerror .message
{
    float: left;
    width: 100%;
    color: #000000 !important;
    padding: 1px;
    text-align: left;
    margin-left: 10px;
    font-size: 15px;
}

#confirmModalOverlay
{
    background-color: Gray;
    cursor: wait;
}

/* Container */
#confirmModalContainer
{
    height: 110px;
    width: 320px;
    left: 50%;
    top: 35%;
    margin-left: -210px;
    font-family: Calibri, Verdana, Arial;
    font-size: 16px;
    text-align: left;
    background: #fff;
    border: 2px solid #989898;
}
#confirmModalContainer .header
{
    height: 30px;
    width: 100%;
    background: url(img/sprite.png) repeat-x 0px 0px;
    color: #0192BF;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 30px;
}
#confirmModalContainer .header span
{
    padding-left: 8px;
}
/*#confirmModalContainer .message
{
    color: #333;
    text-align: center;
    margin: 0;
    padding: 12px 4px;
    font-size: 1em;
}*/
#confirmModalContainer .buttons
{
    width: 100px;
    float: right;
    padding: 20px 10px ;
}
#confirmModalContainer .buttons div
{
    float: right;
    margin-left: 8px;
    width: 70px;
  
    color: #666;
    font-weight: bold;
    text-align: center;
    background: url(img/sprite.png) repeat-x;
    border: 1px solid #bbb;
    cursor: pointer;
}
#confirmModalContainer a.modalCloseX, #confirmModalContainer a.modalCloseX:link, #confirmModalContainer a.modalCloseX:active, #confirmModalContainer a.modalCloseX:visited
{
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    position: absolute;
    top: -1px;
    left: 400px;
    color: Red;
}

following  code Should be added in aspx page:

  <div id="confirm" style="display: none">
        <%--      <a href='#' title="Close" class="modalCloseX modalClose">x</a>--%>
        <div class="headermodal">
            <span class="headermessage" id="headermessage" runat="server"></span>
        </div>
        <div id="imgsuccess" class="headerimage">
            <span class="message"></span>
        </div>
        <%--  <div class="modaltopoverlink">
            <div class="modalnewuser">
                <a id="lnkNewUser" href="" runat="server">Create New User</a></div>
            <div class="modalchangeuser">
                <a id="lnkChangeUser" href="" runat="server">Change User Settings</a></div>
        </div>--%>
        <div class="buttons">
            <div class="No">
                OK</div>
        </div>
    </div>

Samplemodel.js Content: 

(function($){$.modal=function(data,options){return $.modal.impl.init(data,options);};$.modal.close=function(){$.modal.impl.close(true);};$.fn.modal=function(options){return $.modal.impl.init(this,options);};$.modal.defaults={overlay:50,overlayId:'modalOverlay',overlayCss:{},containerId:'modalContainer',containerCss:{},close:true,closeTitle:'Close',closeClass:'modalClose',persist:false,onOpen:null,onShow:null,onClose:null};$.modal.impl={opts:null,dialog:{},init:function(data,options){if(this.dialog.data){return false;}this.opts=$.extend({},$.modal.defaults,options);if(typeof data=='object'){data=data instanceof jQuery?data:$(data);if(data.parent().parent().size()>0){this.dialog.parentNode=data.parent();if(!this.opts.persist){this.dialog.original=data.clone(true);}}}else if(typeof data=='string'||typeof data=='number'){data=$('<div>').html(data);}else{if(console){console.log('SimpleModal Error: Unsupported data type: '+typeof data);}return false;}this.dialog.data=data.addClass('modalData');data=null;this.create();this.open();if($.isFunction(this.opts.onShow)){this.opts.onShow.apply(this,[this.dialog]);}return this;},create:function(){this.dialog.overlay=$('<div>').attr('id',this.opts.overlayId).addClass('modalOverlay').css($.extend(this.opts.overlayCss,{opacity:this.opts.overlay/100,height:'100%',width:'100%',position:'fixed',left:0,top:0,zIndex:3000})).hide().appendTo('body');this.dialog.container=$('<div>').attr('id',this.opts.containerId).addClass('modalContainer').css($.extend(this.opts.containerCss,{position:'fixed',zIndex:3100})).append(this.opts.close?'<a class="modalCloseImg '+this.opts.closeClass
+'" title="'+this.opts.closeTitle+'"></a>':'').hide().appendTo('body');if($.browser.msie&&($.browser.version<7)){this.fixIE();}this.dialog.container.append(this.dialog.data.hide());},bindEvents:function(){var modal=this;$('.'+this.opts.closeClass).click(function(e){e.preventDefault();modal.close();});},unbindEvents:function(){$('.'+this.opts.closeClass).unbind('click');},fixIE:function(){var wHeight=$(document.body).height()+'px';var wWidth=$(document.body).width()+'px';this.dialog.overlay.css({position:'absolute',height:wHeight,width:wWidth});this.dialog.container.css({position:'absolute'});this.dialog.iframe=$('<iframe src="javascript:false;">').css($.extend(this.opts.iframeCss,{opacity:0,position:'absolute',height:wHeight,width:wWidth,zIndex:1000,width:'100%',top:0,left:0})).hide().appendTo('body');},open:function(){if(this.dialog.iframe){this.dialog.iframe.show();}if($.isFunction(this.opts.onOpen)){this.opts.onOpen.apply(this,[this.dialog]);}else{this.dialog.overlay.show();this.dialog.container.show();this.dialog.data.show();}this.bindEvents();},close:function(external){if(!this.dialog.data){return false;}if($.isFunction(this.opts.onClose)&&!external){this.opts.onClose.apply(this,[this.dialog]);}else{if(this.dialog.parentNode){if(this.opts.persist){this.dialog.data.hide().appendTo(this.dialog.parentNode);}else{this.dialog.data.remove();this.dialog.original.appendTo(this.dialog.parentNode);}}else{this.dialog.data.remove();}this.dialog.container.remove();this.dialog.overlay.remove();if(this.dialog.iframe){this.dialog.iframe.remove();}this.dialog={};}this.unbindEvents();}};})(jQuery);

In codeBehind How to call the script:

                this.Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "<script type='Text/javascript' language='javascript'>confirmsuccess('" + "Sucessfully task is completed" + " ','" + SPContext.Current.Site.Url + "','" + "Personal Information" + "');</script>");