Scroll to Top

Dialog

Commonly referred as Light Box, modal, etc. create your customized dialog and use your favorite colors with the color classes of Material Grammi. choose the width of modal and margin from top of the screen. choose how much opacity should modal's overlay have, you can also choose the rgb value of background of modal's overlay. choose any content class and any close class of modal. You can use grid system inside the modal's contents.

SITEMAP Documentation / Js Plugins / Dialog

Demo

Open Modal

Dialog Heading

Dialog can be manipulated into different examples.

Click the close button to close this dialog.

You can add anything in the modal

Code copy

<!-- Button to launch dialog / modal -->
<a class="openmodal btn btn-dark" data-target="#dialog1"> Open Modal </a>
<!-- Dialog which will appear after clicking launch dialog button -->
<div id="dialog1">
    <div class="dialog-contents shadow-dark-1">
        <div class="grey8 text-white padX-20 padY-15">
            <p class="font-20">Dialog Heading</p>
        </div>
        <div class="amber6 padY-40 padX-20">
            <p class="padY-10 text-grey8">Dialog can be manipulated into different examples.</p>
            <p class="padY-10 text-grey8">Click the <a class="dialog-close hover-grey3 radius-5 grey2 pad-5">close</a> button to close this dialog.</p>
        </div>
        <div class="grey8 text-grey2 padX-20 padY-10 row">
            <div class="col m8 l8 s12">
                <p>You can add anything in the modal</p>
            </div>
            <div class="col m4 l4 s12">
                <a class="dialog-close right btn btn-flat-transparent text-grey2 btn-danger animated bounce">close</a>
            </div>

        </div>
    </div>
</div>
<!-- Initialize dialog after jquery and materialgrammi javascript files -->
<script>
    $(".openmodal").dialog({
        background: "rgba(0,0,0,0.4)",
        speed: 800,
        TopMargin: "5%"
    });

</script>

Make your dialog box outstanding by using these options.

Demo

variable default data-type options function
Dialogwidth 80% string any measurement width of the dialog/modal box
mainScroll false bool true, false do you want the scroll to activate on main screen
dialogHei 200px string any measurement set the time of animation exit
contentClass .dialog-contents string class, tagname, id dialog main content, will be helpfull in activating inner scroll
bodyClass .dialog-body string class, tag or id class of the body
closeClass .dialog-close string class, tag or id by clicking on this dialog can be closed
innerScroll true bool true, false activate scroll on content body
attrSet data-target string any attribute it will get the modal id or class to activate modal from this attribute.
TopMargin 10% string any measurement gives the dialog margin from top
speed 1200 numeric any number in ms. speed of appearance and dis-appearance
animIn true bool animation name @keyframe animation on entrance
animOut .fullPic string animation name @keyframe animation on exit
background rgba(0,0,0,0.1) string css background select the background of the dialog/modal
ShowDialog false bool true, false will show dialog when true without click
timingFunction ease-in-out string timing function css timing function to perform on animation

Code copy

<script>
        $(".openmodal").dialog({
            background: "url(any-image.jpg)"
        });
    </script>

Feedback