Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Modal Forms

edited May 2012 in Framework

I have been thinking about this for today, is their any easy way to use current forms as a modal popup within the framework?

Essentially I want to have an "Add New {{model}} " link, so when using the current form the user doesn't have to leave the screen to quickly add and access a new model. I am thinking this would just require a new handler utilizing the same forms?


  • Elefant currently only has a basic modal dialog helper (in Github master branch anyway, gotta get a new beta out soon!). I just made it for the Properties dialog for files in Tools > Files, but you can't yet change the width/height or other properties (except by adding your own CSS, which is a messy solution). It works like this:

    In the view template, add this:

    {! admin/util/modal !}

    Then in your JavaScript you can open a modal dialog like this:

    <a href="#" onclick="$.open_dialog ('Title', '<p>html</p>'); return false">Open</a>

    There's also a matching $.close_dialog() function, but I haven't added properties to it yet. I figured I could add a properties parameter, or change it to something more in line with jQuery's style:

    $.open_dialog ({
        title: 'Title',
        html: '<p>html</p>',
        width: 550,
        height: 400,
        overflow: 'auto'

    From there, you'll have to fetch the HTML of the form, which could just call a form handler that sets its $page->layout = false so it only returns the HTML it actually needs for the dialog. Something like this:

    $.get ('/myapp/formhandler', function (res) {
        $.open_dialog ('Form Title', res);

    You'd also have to override the form's default submit handler with a custom event, for example:

    $('form').submit (function (e) {
        e.preventDefault ();
        var params = {};
        for (var el in this.elements) {
            params[el] = $(this.elements[el]).val ();
        $.post ('/myapp/formhandler', params, function (res) {
            $.close_dialog ();
            $.add_notification (res);

    You may also need to set $form->verify_csrf = false in the handler, since the above post would fail its validation since it would probably be missing the CSRF token that gets dynamically added.

    Anyway, hope some of that helps. If so, maybe we can come up with a nice standard way of doing that and get a tutorial out of it... ;)

Sign In or Register to comment.