Search This Blog

Sunday, May 1, 2011

How to create Sharepoint 2010 Modal Dialog Pop up ( Popup with Faded Background )

Many a times we have a requirement like we need to open a Pop-up with the Faded Background. Sharepoint 2010 has provided us a very simple way to achieve this.
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 PopUp will pops up with the Page of Specified URL.
btnOpenPopUp.Attributes.Add("onClick", "javascript:OpenDialog(‘/_layouts/MyAppPage/MyPage.aspx’);");

8 comments:

  1. Greate Post !!!

    how can we set Title of DialogBox !! In this code...I have called OpenDialog in hyperlink , but i m not able to set title of dialog box , please let me know the way to set it.

    Thanks & Regards,
    Dipti Chhatrapati

    ReplyDelete
  2. how to set y attribute for this window,so that it will be always displayed at the centre of the screen.
    Thanks,
    Athula

    ReplyDelete
  3. thanks very nice and useful.

    ReplyDelete
  4. Nice post !!!
    Reference more about Modal Dialog Pop up
    http://mstechsharing.blogspot.com/2012/03/how-to-display-page-as-modal-dialog-box.html

    ReplyDelete
  5. popup is opening and suddenly closing..any solution?

    ReplyDelete
  6. Modal Dialog box align center of the screen, use below css

    .ms-dlgContent
    {
    position : relative !important;
    top: auto;
    left: 50%;
    }

    ReplyDelete
  7. Nice article.
    I have consolidated all popup related things and made an article:-
    http://sharepoint.infoyen.com/2012/10/24/sharepoint-2010-popup-dialogs/

    Good thing about it: If you require 100 popup in your application then you just need to create 100 dot net user control. Rest my framework take care which uses sharepoint 2010 dialog framework.

    Thanks
    Avinash
    http://sharepoint.infoyen.com

    ReplyDelete