Custom dialog box for SharePoint online
Custom Jquery dialog box made easy
<html>
<body>
<div id="divTermsParent">
<Div id="divTerms"></Div>
<br />
<button id="btnAccept" onclick="Response(1)">Accept</button>
<button id="btnDecline" onclick="Response(0)">Decline</button>
</div>
<a onclick="OpenDialog();">open dialog</a>
</body>
</html>
Now you need to provide the java script to open the html as popup. For that you will use
SP.UI.ModalDialog.showModalDialog method. Please use the below code for opening the dialog box:
Custom dialog box or popup functionality on SharePoint pages using JavaScript can be implemented very easily.
Start with adding some space holder in your html to be the container of your popup.
Copy the code from below:
<body>
<div id="divTermsParent">
<Div id="divTerms"></Div>
<br />
<button id="btnAccept" onclick="Response(1)">Accept</button>
<button id="btnDecline" onclick="Response(0)">Decline</button>
</div>
<a onclick="OpenDialog();">open dialog</a>
</body>
</html>
Now you need to provide the java script to open the html as popup. For that you will use
SP.UI.ModalDialog.showModalDialog method. Please use the below code for opening the dialog box:
function OpenDialog()
{
var htmlElement = document.createElement("h3");
var dialogDiv = document.getElementById("divTermsParent");
dialogDiv.setAttribute("style", "block");
htmlElement.appendChild(dialogDiv);
var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.html = htmlElement;
dialogOptions.title = 'Welcome to Tech for geeks blog';
dialogOptions.allowMaximize= false; //To hide the maximize option from dialog box
dialogOptions.showClose=false; //To hide the close option from dialog box
dialogOptions.width = 750; // Width of the Dialog
dialogOptions.height = 500; // Height of the Dialog
//Function to capture dialog closed event
dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
return false;
}
// Dialog close event capture function
function CloseCallback(strReturnValue, target)
{
if (strReturnValue === SP.UI.DialogResult.Accept) // Perform action on Ok.
{
alert("User clicked Ok!");
}
if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.
{
alert( "User clicked Cancel!");
}
}
In the above code, you will observe that dialog properties has also been configured.
Please work out those properties as per requirements.
Please see the snapshot of the dialog box which you just have created:
In the above code, you will observe that dialog properties has also been configured.
Please work out those properties as per requirements.
Please see the snapshot of the dialog box which you just have created:
Comments
Post a Comment