Sign upLogin

throrin19/materialBootstrap

View on GitHub
Star
examples/dialog.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../less/bootstrap.css"/>
    <script type="text/javascript" src="../js/libs/vendors/jquery/dist/jquery.min.js"></script>
    <script src="../js/libs/vendors/bootstrap/js/modal.js"></script>
</head>
<body>
<div style="padding: 50px;">
    <!-- Button trigger modal -->
    <button class="btn-raised" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>
    <button class="btn-raised" data-toggle="modal" data-target="#myModal2">
        Launch dark demo modal
    </button>
    <button class="btn-raised" data-toggle="modal" data-target="#myModal3">
        Launch demo modal full-width footer
    </button>
</div>
<!-- Modal -->
<div class="material-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac molestie nisi. Aliquam dapibus justo massa, in consequat ante interdum vitae. Mauris lorem libero, tincidunt id iaculis ac, faucibus eget diam. Donec adipiscing nisi vel dui porttitor volutpat. Etiam eget imperdiet nisi. Sed malesuada lacinia nulla, ut fringilla nibh luctus quis. Pellentesque eu metus at arcu interdum ullamcorper. Integer nec risus rutrum, rutrum lorem ac, lobortis ipsum. Proin vitae sagittis velit. Donec vel interdum eros, ut ornare quam.

                Etiam a lectus sed arcu viverra aliquet at ac risus. Sed et dolor rhoncus, auctor sem nec, ornare dui. Duis at leo vel velit commodo semper sit amet quis nisi. Nulla et congue erat, congue hendrerit velit. Etiam ac enim mattis, varius lacus sed, vehicula ipsum. Phasellus ullamcorper mollis turpis. Donec lobortis adipiscing sapien. Nulla porttitor sapien vitae eros semper, et pulvinar leo imperdiet. Vivamus vel iaculis orci. Aliquam erat volutpat. Sed ut dolor vel libero tempus tristique rhoncus id tellus. Quisque fringilla luctus accumsan. Praesent dignissim malesuada vehicula.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-flat pull-left">Left Action</button>
                <button type="button" class="btn-flat" data-dismiss="modal">Close</button>
                <button type="button" class="btn-flat blue">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal stacked footer -->
<div class="material-modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModal3Label">Modal title</h4>
            </div>
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac molestie nisi. Aliquam dapibus justo massa, in consequat ante interdum vitae. Mauris lorem libero, tincidunt id iaculis ac, faucibus eget diam. Donec adipiscing nisi vel dui porttitor volutpat. Etiam eget imperdiet nisi. Sed malesuada lacinia nulla, ut fringilla nibh luctus quis. Pellentesque eu metus at arcu interdum ullamcorper. Integer nec risus rutrum, rutrum lorem ac, lobortis ipsum. Proin vitae sagittis velit. Donec vel interdum eros, ut ornare quam.

                Etiam a lectus sed arcu viverra aliquet at ac risus. Sed et dolor rhoncus, auctor sem nec, ornare dui. Duis at leo vel velit commodo semper sit amet quis nisi. Nulla et congue erat, congue hendrerit velit. Etiam ac enim mattis, varius lacus sed, vehicula ipsum. Phasellus ullamcorper mollis turpis. Donec lobortis adipiscing sapien. Nulla porttitor sapien vitae eros semper, et pulvinar leo imperdiet. Vivamus vel iaculis orci. Aliquam erat volutpat. Sed ut dolor vel libero tempus tristique rhoncus id tellus. Quisque fringilla luctus accumsan. Praesent dignissim malesuada vehicula.
            </div>
            <div class="modal-footer full-width">
                <button type="button" class="btn-flat blue">Save changes</button>
                <button type="button" class="btn-flat" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- dark modal -->
<div class="material-modal dark fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModal2Label">Modal title</h4>
            </div>
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac molestie nisi. Aliquam dapibus justo massa, in consequat ante interdum vitae. Mauris lorem libero, tincidunt id iaculis ac, faucibus eget diam. Donec adipiscing nisi vel dui porttitor volutpat. Etiam eget imperdiet nisi. Sed malesuada lacinia nulla, ut fringilla nibh luctus quis. Pellentesque eu metus at arcu interdum ullamcorper. Integer nec risus rutrum, rutrum lorem ac, lobortis ipsum. Proin vitae sagittis velit. Donec vel interdum eros, ut ornare quam.

                Etiam a lectus sed arcu viverra aliquet at ac risus. Sed et dolor rhoncus, auctor sem nec, ornare dui. Duis at leo vel velit commodo semper sit amet quis nisi. Nulla et congue erat, congue hendrerit velit. Etiam ac enim mattis, varius lacus sed, vehicula ipsum. Phasellus ullamcorper mollis turpis. Donec lobortis adipiscing sapien. Nulla porttitor sapien vitae eros semper, et pulvinar leo imperdiet. Vivamus vel iaculis orci. Aliquam erat volutpat. Sed ut dolor vel libero tempus tristique rhoncus id tellus. Quisque fringilla luctus accumsan. Praesent dignissim malesuada vehicula.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-flat dark pull-left">Left Action</button>
                <button type="button" class="btn-flat dark" data-dismiss="modal">Close</button>
                <button type="button" class="btn-flat dark blue">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>