SharePoint 2010 : how to open Modal Dialog in ECB Menu

You can open model dialog in SharePoint site using the following code:

<script type="text/javascript">

function openDialog() {

     var options = {

          url: "demopage.aspx", 

         width: 600,

         height: 300,

         title: "My PopUp",

     };

     SP.UI.ModalDialog.showModalDialog(options);

 }

</script>

<div>

    <a  onclick="javascript:openDialog(); return false;">Click Herea>

    <asp:Button ID="btnDialog" runat="server" Text="Open Dialog"  OnClientClick="javascript:openDialog(); return false;"/>

</div>

But what if you want to open dialog from ECB menu? Create new custom action in Element.xml file and in UrlAction tag use the following javascript function.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> 

    <CustomAction

        Id="{B0B5A0CB-7FBE-4dd6-9B2A-2B1E1321B8F9}"

        RegistrationType="List"

        RegistrationId="101"

        Location="EditControlBlock"

        Title="Goto My Blog">     

        <UrlAction Url="javascript: function onClose(){ }

          var o = {

            url: 'http://www.niteen.co.cc',

            title: 'MyBlog',

            allowMaximize: true,

            showClose: true,

            width: 700,

            height: 500,

            dialogReturnValueCallback: onClose

          };

          SP.UI.ModalDialog.showModalDialog(o);"/>

    </CustomAction> 

</Elements>

In above code, I created new ECB menu for “Document library”, you can create ECB menu for any lists by changing RegistrationId , you can find all required Register Id here.

If you are not able to see modal dialog then change the <UrlAction> tag with following function.

<UrlAction Url="javascript:(function () {

        var o = {

        url:'http://www.niteen.co.cc',

        title: 'MyBlog',

        allowMaximize: true,

        showClose: true,

        width: 700,

        height: 500

        };

        SP.UI.ModalDialog.showModalDialog(o); }) ();"/>