I just want to create a modal and play with it, but can't find a way to do so. I already checked other questions on the subject, but I still can't figure why my modal isn't showing correctly.

Here is my code :

<div id="my-modal" class="modal-shade">
        <div class="modal">
            some text I'd like to be shown...

var $modal = new Garnish.Modal($('#my-modal'));

$('#show-modal-btn').click(function() {

When I load the page, the big shader appears instantly, and my modal is nowhere to be found, and it moved in the dom tree. Clicking the button doesnt make it appear again.

1 Answer 1


Foud the answer after digging a bit, in fact I missed a little detail.

The base javascript code was correct :

$modal = new Garnish.Modal($('#my-modal')); //create a new modal
$modal.show(); //shows the modal
$modal.hide(); //hides the modal

Everything is in the HTML code, you need to declare something like this :

<div id="my-modal" class="modal"> <!-- modal body -->
    <div id="modal" class="body"> <!-- modal-content -->
        <header class="header">
            <h2>Modal header</h2>

Go check the modal sources for api methods.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.