twitter bootstrap modal popup, customized size and centralized location.

When I try to make bootstrap modal wider than the default. It is not centralized anymore, here we need to modify the css to adjust the left margin to the right px. Here is a block of handy code to adjust the modal width by a certain percentage of document width and adjust the left margin to centralize the modal as well.

$('#mymodal').modal({
        backdrop: true,
        keyboard: true
    }).css({
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});
Advertisements

Render modal dialog from a PartialView, client side validation not working

While I am using JQuery to render a modal popup, and the popup content is read from a controller action with a partialview returned. The client side validation is not fired.

Here is a piece of sample code, I am using bootstrap modal to render the modal popup.

var url = "/Feed/Save/" + id;
        $.get(url, null, function (html) {
            $("#saveFeed").html(html);
            $("#saveFeedModal").modal('show');
        });

You need to add a line to parse unobtrusive validator,

            $.validator.unobtrusive.parse($("#saveFeed"));

After the modified the code, it all works fine,

var url = "/Feed/Save/" + id;
        $.get(url, null, function (html) {
            $("#saveFeed").html(html);
            $.validator.unobtrusive.parse($("#saveFeed"));
            $("#saveFeedModal").modal('show');
        });