I need to create a fairly complex modal sidebar for something like settings. I'd like

No problem. There is more info in the <a href="http://github.hubspot.com/vex/api/advan

Include complex HTML in dialog about vex HOT 4 CLOSED

hubspot commented on July 24, 2024

Include complex HTML in dialog

from vex.

Comments (4)

qodeboy commented on July 24, 2024 3

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'
        });
    });

from vex.

adamschwartz commented on July 24, 2024

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.

from vex.

pferrel commented on July 24, 2024

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

from vex.

adamschwartz commented on July 24, 2024

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

from vex.

Recommend Projects

Include complex HTML in dialog about vex HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent