Popup Modal?

Dazed
Dazed
@dazed
12 years ago
1,022 posts
How is the best way t do a popup modal on JR5?

Thanks
updated by @dazed: 12/11/13 12:16:04PM
brian
@brian
12 years ago
10,148 posts
It depends on were the popup needs to be done at. Where are you wanting to do a modal popup?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
12 years ago
1,022 posts
audio detail page of course :)
brian
@brian
12 years ago
10,148 posts
From a template is actually the easiest - Jamroom 5 uses "simple modal":

http://www.ericmmartin.com/projects/simplemodal/

that page has some good examples to show you how to use it.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
12 years ago
1,022 posts
Thanks Brian!
brian
@brian
12 years ago
10,148 posts
No problem - and note that JR already includes the JS script for you, so you don't need to worry about bringing in the simple modal JS source - just use it on the page.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
12 years ago
2,584 posts
I've got this in my notes:

Simplest example in a template:

<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>

And then in your javascript:

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



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
Dazed
Dazed
@dazed
12 years ago
1,022 posts
awesome! can you add script tags in a modal? Mine was not appearing.
updated by @dazed: 10/29/13 11:57:22AM