jQuery UI Modal Dialog disables scrolling in Chrome

Is Chrome becoming the new IE?

As much as I love jQuery, I still cannot escape the fact that jQuery UI leaves a lot to be desired. Yesterday I ran across an issue where the jQuery UI modal dialog acted inconsistently in different browsers. Normally opening a modal leaves the background page functionality unaltered, but in Webkit browsers (I ran into this while using Chrome) it disables the page scroll bars.

The Fix

Yes, this bug has already been reported. Yes, it is priority major. No, it won't be fixed anytime soon. For a feature as widely used as the Modal Dialog, I find that kinda sad.

However, thanks to Jesse Beach, there is a tiny little patch to fix this! Here is a slightly updated version of the fix:

(function($) {
  if ($.ui && $.ui.dialog && $.browser.webkit) {
    $.ui.dialog.overlay.events = $.map(['focus', 'keydown', 'keypress'], function(event) { 
      return event + '.dialog-overlay';
    }).join(' ');
  }
}(jQuery));

Additional Resources

• Stackoverflow Question
• Official jQuery Bug - Ticket #4671
• Jesse's Patch

Hope that helps!
Tom

Configuring MVC Routes in Web.config

ASP.NET MVC is even more configurable than you think!

Routes are registered in the Application Start of an MVC application, but there is no reason that they have to be hard coded in the Global.asax. By simply reading routes out of the Web.config you provide a way to control routing without having to redeploy code, allowing you to enable or disable website functionality on the fly.

I can't take credit for this idea, my implementation is an enhancement of Fredrik Normén's MvcRouteHandler that adds a few things that were missing:

• Optional Parameters
• Typed Constraints
• Data Tokens
• An MVC3 Library

Download MvcRouteConfig.zip for the project and a sample application.

Example Global.asax

public static void RegisterRoutes(RouteCollection routes)

{

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    var routeConfigManager = new RouteManager();

    routeConfigManager.RegisterRoutes(routes);

}

Example Web.config

<configuration>

  <configSections>

    <section name="routeTable" type="MvcRouteConfig.RouteSection" />

  </configSections>

  <routeTable>

    <routes>

      <add name="Default" url="{controller}/{action}/{id}">

        <defaults controller="Home" action="Index" id="Optional" />

        <constraints>

          <add name="custom"

              type="MvcApplication.CustomConstraint, MvcApplication">

            <params value="Hello world!" />

          </add>

        </constraints>

      </add>

    </routes>

  </routeTable>

Thanks Fredrik!

~Tom

Update 2/16/2013 - I have added this source to GitHub and created a NuGet Package.