1] Create list in sharepoint
2] Open SharePoint designer.
3] Click on "List and Library" at left side panel and select list.
4] Click on list form in list setting tab.
5] Create .js file and past below code and stored in folder of "style library".
<script src="http://code.jquery.com/jquery-1.9.1.js"> </script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script src="/Style%20Library/jquery-1.7.2.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script><style type="text/css">
.buttonsave{
background:666699;
width:150px;
margin-top:10px !Important;
border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 6px 6px 6px 6px; text-decoration:none; display:inline-block;font-weight:bold; color: #FFFFFF;
background-color: #8ed058;
}
#MSOZoneCell_WebPartWPQ4
{
margin-top:-90px !Important;
}
.s4-wpcell ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth
{
margin-top:-90px !Important;
}
.buttonsave:hover{
border:1px solid #1c5675;
background-color: #36780f;
/*background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
background-image: -moz-linear-gradient(top, #26759e, #133d5b);
background-image: -ms-linear-gradient(top, #26759e, #133d5b);
background-image: -o-linear-gradient(top, #26759e, #133d5b);
background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b); */
}
</style><script type="text/javascript">
function AddNewProject() {
var webUrl = _spPageContextInfo.siteAbsoluteUrl;
url =webUrl +'/Lists/CMR/4M.aspx?IsDlg=1';
// OpenNewFormUrl(url);
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', OpenNewFormUrl(url));
}
function OpenNewFormUrl(url) {
var options = {
allowMaximize: false,
showClose: true,
};
SP.SOD.executeFunc('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', function () {
SP.UI.ModalDialog.commonModalDialogOpen(url, options,RefreshPage, null);
});
function RefreshPage()
{
// location.reload(true);
}
}
</script>
<div>
<button class="buttonsave" onclick="AddNewProject();return false;" size="150px">Add New CR</button></div>
6] then edit a page where you want to open this dialog bix.
7] Add content editor web part and refer .js file.
8] Click on Add CR button , dialog box will be opened.
2] Open SharePoint designer.
3] Click on "List and Library" at left side panel and select list.
4] Click on list form in list setting tab.
5] Create .js file and past below code and stored in folder of "style library".
<script src="http://code.jquery.com/jquery-1.9.1.js"> </script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script src="/Style%20Library/jquery-1.7.2.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script><style type="text/css">
.buttonsave{
background:666699;
width:150px;
margin-top:10px !Important;
border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 6px 6px 6px 6px; text-decoration:none; display:inline-block;font-weight:bold; color: #FFFFFF;
background-color: #8ed058;
}
#MSOZoneCell_WebPartWPQ4
{
margin-top:-90px !Important;
}
.s4-wpcell ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth
{
margin-top:-90px !Important;
}
.buttonsave:hover{
border:1px solid #1c5675;
background-color: #36780f;
/*background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
background-image: -moz-linear-gradient(top, #26759e, #133d5b);
background-image: -ms-linear-gradient(top, #26759e, #133d5b);
background-image: -o-linear-gradient(top, #26759e, #133d5b);
background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b); */
}
</style><script type="text/javascript">
function AddNewProject() {
var webUrl = _spPageContextInfo.siteAbsoluteUrl;
url =webUrl +'/Lists/CMR/4M.aspx?IsDlg=1';
// OpenNewFormUrl(url);
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', OpenNewFormUrl(url));
}
function OpenNewFormUrl(url) {
var options = {
allowMaximize: false,
showClose: true,
};
SP.SOD.executeFunc('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', function () {
SP.UI.ModalDialog.commonModalDialogOpen(url, options,RefreshPage, null);
});
function RefreshPage()
{
// location.reload(true);
}
}
</script>
<div>
<button class="buttonsave" onclick="AddNewProject();return false;" size="150px">Add New CR</button></div>
6] then edit a page where you want to open this dialog bix.
7] Add content editor web part and refer .js file.
8] Click on Add CR button , dialog box will be opened.


No comments:
Post a Comment