SharePoint Modal Dailoge to Open Page

Hi All,

In a following post we will see , how to open a Page in SharePoint Modal Dailoge. It helps the users stay in context of the Page without navigate away from the Page.

The JavaScript client object model provides the SP.UI.ModalDialog class to work with the dialog framework.

find the below function.
SharePoint 2010 Example:
<script type="text/ecmascript">

    var options;

    function openModalDialog(url) {

        options = SP.UI.$create_DialogOptions();

        options.width = 980;

        options.height = 400;

        options.title='Sample title';

        options.url = url;

        options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);

        SP.UI.ModalDialog.showModalDialog(options);

    }

    function CloseCallback(result, target) {

        location.reload(true);

        //window.location.href = document.URL;

    }

</script>

I am passing URL to the function.,to work the same functionality in SharePoint 2013 , follow below approach.

1.  Remove the Java Script reference.

      <script src="/_layouts/sp.js" type="text/javascript"></script>  

      <script src="/_layouts/SP.UI.Dialog.js" type="text/javascript"></script> 

2.  Add to the url variable "?IsDlg=1"` 

3.  Replace the command SP.UI.ModalDialog.showModalDialog() with the new command SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

function openModalDialog(url) {

         var options = {

             url: url + "&IsDlg=1",

             tite: 'Sample Title',

             allowMaximize: false,

             showClose: true,

             width: 980,

             height: 400

         };        

         SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);        

         return false;

     }

Related Post