CODEWITHSUNDEEP
javascriptjquerymodal-dialog
Auguste
Auguste

Reputation: 285

jquery generate modal box

I would like to display a Modal box. Is this possible? I have code below showing how I normally generate textboxes etc.

$(document).ready(function(){

var counter = 1;

$(".thing").click(function GenerateModal () {  

var newModal = $(document.createElement('div'))
     .attr("id", 'myModal' + counter).attr("class", 'modal hide fade').attr("tabindex", '-1').attr("role", 'dialog').attr("aria-labelledby", 'myModalLabel').attr("aria-hidden", 'true');


newModal.after().html('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><img src="img/werk/logo.jpg" class="pull-right" alt=""><p>One fine body…</p></div>');

//Excecute new modal?//

counter++;
});
});

Upvotes: 0

Views: 1812

Answers (2)

Michael Besteck
Michael Besteck

Reputation: 2423

This solution is based on http://www.webdesignerdepot.com/2012/04/techniques-for-creating-modal-windows/. To create a modal dialog a div-"layer" covering the whole screen is used. 

<!DOCTYPE html>
<html>
<head>
    <title>Modal Window</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">

        var newModal;

        function executeModal() {
            $("#blind").attr("z-index", 9999).show();
            $("#modalDivContainer").append(newModal).show();
        }

        function closeModal(count) {
            $("#modalDivContainer").hide();
            $("#myModal" + count).remove();
            $("#blind").attr("z-index", 0).hide();
        }

        $(document).ready(function() {

            var counter = 1;

            $(".thing").click(function GenerateModal() {
                newModal = $(document.createElement('div'))
                        .attr("id", 'myModal' + counter).attr("class", 'modal hide fade').attr("tabindex", '-1').attr("role", 'dialog').attr("aria-labelledby", 'myModalLabel').attr("aria-hidden", 'true');
                newModal.after().html('<div class="modal-header"><button onclick="closeModal(' + counter + ')" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><img src="img/werk/logo.jpg" class="pull-right" alt=""><p>One fine body…</p></div>');
                executeModal();
                counter++;
            });
        });

    </script>
    <style type="text/css">
        .blind
        {
            z-index:0;
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            display: none;
            background-color:#555;
        }
        .modalDivContainer {
            z-index: 10000;
            position:absolute;
            top: 50%;
            left: 50%;
            width:400px;
            height:300px;
            margin-left:-200px;
            margin-top:-150px;
            display: none;
            background-color:#ffffff;
        }
    </style>
</head>
<body>
    <div class="blind" id="blind"></div>
    <div class="modalDivContainer" id="modalDivContainer"></div>
    <button class="thing">thing</button>
</body>
</html>

Upvotes: 2

reyaner
reyaner

Reputation: 2819

Im not sure what mean with: "Execute new modal?"

But here some hints:

Use this:

$(".thing").click(function() {

or

function GenerateModal () {...}
$(".thing").click(GenerateModal);

This is also possible:

var newModal = $('<div attr="var" attr="var" attr="var" />')

or also .attr() as Array

var newModal = $('<div/>').attr({"attr":"var",...})

Upvotes: 1

Related Questions