Required components :
jquery-1.4.2.min.js
jquery.simplemodel.js
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;
}
(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);
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>
<%-- <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>");
No comments:
Post a Comment