ultrajam 3rd party developer
Timeline blog documentation followers forum marketplace

How to use a modal in a template

Ultrajam » Documentation » Code » How to use a modal in a template
  • Using a modal window in a template is not hard, especially if you put the contents of the modal in the template itself.

    The search button in jrElastic does just that, but to save you searching through the templates here is an isolated example.

  • The Template

    In the smarty template you need a button or a link to launch the modal.

    Also in the template is the modal itself, which is initially hidden. It doesn't need to appear in the same place in the html as the link or button, it can be anywhere on the page. You may need to ajust the css and html to suit yourself, but this will get you started: 
    <a onclick="myModule_modal();" title="Open Modal">Open Modal</a>

<div id="myModal" class="search_box" style="display:none;">
	<div style="float:right;">
	    <input type="button" class="simplemodal-close form_button" value="x">
	</div>
	<span class="title">Modal Title</span><br><br>

	HERE IS THE MODAL CONTENT

	<div class="clear"></div>
</div>

  • The Javascript

    You also need a javascript function, which would most likely go into your module's js file: /modules/myModule/js/myModule.js 
    function myModule_modal()
{
    $('#myModal').modal({

        onOpen: function (dialog) {
            dialog.overlay.fadeIn(75, function () {
                dialog.container.slideDown(5, function () {
                    dialog.data.fadeIn(75);
                });
            });
        },
        onClose: function (dialog) {
            dialog.data.fadeOut('fast', function () {
                dialog.container.hide('fast', function () {
                    dialog.overlay.fadeOut('fast', function () {
                        $.modal.close();
                    });
                });
            });
        },
        overlayClose:true
    });
}
  • dialog is really cool.

Tags