Include complex HTML in dialog #40

pferrel · 2013-12-25T17:55:05Z

I need to create a fairly complex modal sidebar for something like settings. I'd like to have is slide out from the left and remain in place attached to the left side of the viewport/window. The user will fiddle with settings and dismiss at some point.

I can see how to do most of this but wonder about how to put the fairly complex HTML into the dialog.

adamschwartz · 2013-12-25T19:17:41Z

You can place any HTML you want inside a dialog. You can do this by setting content in the options object you pass to vex.open(options), or you can manually append it yourself since you are returned the $vexContent jQuery-ed DOM element from the open call. So let's say you have a page like this:

<html>
<head>
    <style>.templates { display: none }</style>
<body>
    <header><!--- .. --></header>
    <main><!--- .. --></main>
    <div class="templates">
        <sidebar id="sidebarTemplate"><!--- .. --></sidebar>
    </div>
</body>

You could either do this:

vex.open({
    content: $(sidebarTemplate).clone()
});

Or this:

var $vexContent = vex.open();
$vexContent.append($(sidebarTemplate).clone());

Of course, you'll additionally want to set the className option property to style the modal on the left in the way you desire. I'd recommend looking at the recently added theme "Bottom Right Corner" for guidance there.

pferrel · 2013-12-25T19:26:50Z

Ah, tricky. I’ve been struggling with passing html as strings but never thought to do that.
thanks a bunch

adamschwartz · 2013-12-25T19:32:01Z

No problem. There is more info in the Advanced page of the docs as well.

qodeboy · 2016-06-17T09:05:44Z

Cloning HTML could produce duplicated IDs, which is bad and could introduce issues with other JS libraries or CSS. In my case, to warkaround this I wrapped up my templates into <script type="text/html"></script> and instead of cloning just doing $.html():

$(document).on('click', '[data-vex-toggle="modal"]', function (e) {
        e.preventDefault();

        var $trigger = $(this);
        var $template = $('script[type="text/html"]#' + $trigger.data('template'));

        if (!$template.length) {
            return;
        }

        vex.open({
            content: $template.html(),
            className: 'vex-theme-default'
        });
    });

adamschwartz closed this as completed Dec 25, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Include complex HTML in dialog #40

Include complex HTML in dialog #40

pferrel commented Dec 25, 2013

adamschwartz commented Dec 25, 2013

pferrel commented Dec 25, 2013

adamschwartz commented Dec 25, 2013

qodeboy commented Jun 17, 2016

Include complex HTML in dialog #40

Include complex HTML in dialog #40

Comments

pferrel commented Dec 25, 2013

adamschwartz commented Dec 25, 2013

pferrel commented Dec 25, 2013

adamschwartz commented Dec 25, 2013

qodeboy commented Jun 17, 2016