Dialogs

Automatically attached

Dialog title

Dialog content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>
    <a class="has-dialog" href="#example-dialog">Open example dialog</a>
</p>

<div class="dialog example mfp-hidden" id="example-dialog">
    <h1 class="title">Dialog title</h1>
    <p>Dialog content ...</p>
</div>

Manually triggered

Dialogs can be used via JavaScript custom events. Use dialog:open to show dialog or dialog:close to dismiss it.

Lūdzu, uzgaidiet!

Pašlaik tiek veikta jūsu sagatavotā atlīdzības pieteikuma nosūtīšana.

<div class="dialog loader mfp-hidden">
    <h1 class="heading">Lūdzu, uzgaidiet!</h1>
    <p class="text">Pašlaik tiek veikta jūsu sagatavotā atlīdzības pieteikuma nosūtīšana.</p>
    <button class="button close">Trigger dialog:close</button>
</div>

var page = jQuery(document);

page.on('contentloaded', function(event)
{
    var block = jQuery(event.target);

    var openButton  = block.find('.button.open');
    var closeButton = block.find('.button.close');

    var params = {
        source: '.dialog.loader',
        modal: true
    };

    openButton.on('click', function(event)
    {
        page.trigger('dialog:open', params);
    });

    closeButton.on('click', function(event)
    {
        page.trigger('dialog:close');
    });
});

Dialog source parameter is required and can accept dialog selector, HTML or jQuery object. Additionally, optional modal parameter can be set, so dialog has modal-like behavior, it won't be possible to dismiss.