Modal pop up in Sharepoint

Question

How to create modal popup in Sharepoint I want to put 3 or 4 times java script promth or alerts in the site. How should I made them ?

Answer 1

Following is the way to show modal dialog in SharePoint,

Below is the JavaScript with the help of which we can open a Modal Dailog Pop Up of Sharepoint 2010.

 <script type="text/javascript">
    function OpenDialog(URL) {
       var NewPopUp = SP.UI.$create_DialogOptions();
       NewPopUp.url = URL;
       NewPopUp.width = 700;
       NewPopUp.height = 350;
       SP.UI.ModalDialog.showModalDialog(NewPopUp);
   }
 </script>

Call the Javascript on Button click and the modal Pop Up will pops up with the Page of Specified URL. btnOpenPopUp.Attributes.Add("onClick", "javascript:OpenDialog(‘/_layouts/MyAppPage/MyPage.aspx’);");

And if you want to create Alert box or Information box please follow the steps given in the below blog,

http://www.tekritisoftware.com/sharepoint-custom-modal-pop-up-confirmation-dialog-box

Hope this helps,

On Script Part

 // Call openDialog method on button click or on page load 

 function OpenInformationDialog(InformationMessage) {
 var cloneModalContent = document.createElement('div');
 $("#lblInformationMessage").html(InformationMessage);
  cloneModalContent.innerHTML = document.getElementById('InformationBox').innerHTML;

 var options = {
  html: cloneModalContent, // ID of the HTML tag
// or HTML content to be displayed in modal dialog
 width: 375,
 height: 150,
 title: "Error:",
 dialogReturnValueCallback: CloseDialog, // custom callback function
 allowMaximize: false,
 showClose: true
};
SP.UI.ModalDialog.showModalDialog(options);

}

Html:

<div id="InformationBox" style="display:none;">
<div id="Div2" style="height:100px; padding-top:10px;padding-left:10px;padding-right:10px; font-weight:bold;">
 label id="lblInformationMessage"> /label>
</div>
<div id="Div3" style="float:right;padding-right:5px;">
 <input type="button" style="width:75px;" value="OK"     onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes, 'Cancel'); return false;" />
 </div>
  </div>

Change the things according to your logic.