Question

I am using jquery modal popup in my application with MVC3 Razor view.

Issue is I need to open popup once I click on Menu Options, these Menu options are there in Layeout page (coz I need to show it throughout the site). As I have to have the popup html code at layeout, so it is appearing as hidden in all page sources.

So is there any better way through which I can create popup html at run time only?

I using this right now:

$(id).dialog({
            closeOnEscape: true,
            draggable: true,
            resizable: false,
            dialogClass: clz,
            modal: true,
            title: $(id + ' .dialog-content').attr('title'),
            closeText: ''
        });

Answer 1

You can use JQuery UI Dialog plugin and use it to load the modal dialog via ajax

Example

$('#MyAtag').click(function () {
// Add a container for the modal dialog, or get the existing one
var dialog = ($('#ModalDialog').length > 0) ? $('#ModalDialog') : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
// load the data via ajax
$.get( 'mycontroller/myaction', {},
    function (responseText, textStatus, XMLHttpRequest) {
        dialog.html(responseText);
        dialog.dialog({
            bgiframe: true,
            modal: true,
            width: 940,
            title: 'My Title'
        }); 
    }
);
});

which binds a call to an ajax ‘get’ to the ‘click’ event of a link. The ajax get request returns a partial view from the corresponding action in you MVC project, which then shows up in the modal dialog.

Here is a rough example of what the controller could look like:

public ActionResult MyAction()
{
    // Do Some stuff
    //...

    // If the request is an ajax one, return the partial view
    if (Request.IsAjaxRequest())
        return PartialView("PartialViewName");

    // Else return the normal view
    return View();
}

Is it what you want ?