webentwicklung-frage-antwort-db.com.de

Twitter Bootstrap-Modal dynamisch erstellen

Ich baue eine Rails-Anwendung und möchte den Inhalt von einem Rails-Partial über AJAX in das Modal einfügen.

In einem Twitter Bootstrap 2.3.2-Modal habe ich über die Dokumentation gelesen, dass Sie über ajax Inhalte mit dem Remote-Key laden können. 

http://getbootstrap.com/2.3.2/javascript.html#modals

Dies ermöglicht jedoch nur das Einfügen von Inhalten in den .modal-body, anstatt das gesamte modale Modul dynamisch aufzubauen. 

Gibt es eine Möglichkeit, das gesamte Modal, einschließlich .modal-header, .modal-footer, dynamisch mit JS zu erstellen? 

Es scheint sehr unübersichtlich, dies mit einer Zeichenfolge zu tun, wie folgt:

partial = render_to_string(:partial => 'some-partial').gsub(%{"}, %{'}).gsub(/'/,"\\\\'").gsub("\n", "")
27

Update:

Seit ich dies geschrieben habe, habe ich eine elegante Bootstrap 3-Modal-Wrapper-Funktion hier gefunden, für die kein HTML-Code hinzugefügt werden muss.


Hier ist ein Codebeispiel, das dies demonstriert. Fügen Sie einfach ein div in Ihrem <body> (in <div class = "container") von bootstrap ein, zum Beispiel:

<div id="idMyModal"></div>

und dann kannst du es benutzen über:

var header = "This is my dynamic header";
var content = "This is my dynamic content";
var strSubmitFunc = "applyButtonFunc()";
var btnText = "Just do it!";
doModal('idMyModal', header, content, strSubmitFunc, btnText);

Um das Modal zu schließen, rufen Sie hideModal auf, das auch unten definiert ist:

function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
    var html =  '<div id="modalWindow" class="modal hide fade in" style="display:none;">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += '<p>';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    if (btnText!='') {
        html += '<span class="btn btn-success"';
        html += ' onClick="'+strSubmitFunc+'">'+btnText;
        html += '</span>';
    }
    html += '<span class="btn" data-dismiss="modal">';
    html += 'Close';
    html += '</span>'; // close button
    html += '</div>';  // footer
    html += '</div>';  // modalWindow
    $("#"+placementId).html(html);
    $("#modalWindow").modal();
}


function hideModal()
{
    // Using a very general selector - this is because $('#modalDiv').hide
    // will remove the modal window but not the mask
    $('.modal.in').modal('hide');
}
32
Amnon

Update

Vor kurzem bin ich auf bootbox.js gestoßen, eine ganze Bibliothek, die sich der dynamischen Erstellung von Bootstrap-Modalen widmet und auf die Interaktion der Benutzer mit ihnen reagiert. Bootbox akzeptiert Callbacks anstelle eines Funktionsnamens. Ich habe es bisher noch nicht persönlich verwendet, da ich eine 26-KB-Bibliothek nicht so rechtfertigen kann, dass sie im Wesentlichen die Funktionen der folgenden Funktion ausführt. Aber ich dachte, jemand könnte es nützlich finden.

Update 17.08.2016

Ich benutze die Bootbox jetzt für so ziemlich jedes Projekt, für das ich dynamische Modale brauche. Funktioniert super und ich kann es wärmstens empfehlen.

Update 01.10.2014

Bootbox unterstützt Bootstrap 4 noch nicht offiziell, aber es gibt einen bootbox v5.x -Zweig, in dem sie mit Bootstrap 4-Unterstützung arbeiten. Gemäß dem 5.0.0-Roadmap - und Bootbox 5.0-Versandliste -Ticket klingt es so, als sei der Zweig ziemlich bereit, aber noch nicht freigegeben. Es gibt jedoch einige Anweisungen zur Verwendung. Disclaimer: Ich habe noch nicht an v5.x verzweigt und kann nicht für die Vollständigkeit bürgen. 

Ursprünglicher Beitrag

Code aus Ammons Antwort oben. Update für Bootstrap 3.0

function doModal(placementId, heading, formContent, strSubmitFunc, btnText)
{
    html =  '<div id="modalWindow" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
    html += '<div class="modal-dialog">';
    html += '<div class="modal-content">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    if (btnText!='') {
        html += '<span class="btn btn-success"';
        html += ' onClick="'+strSubmitFunc+'">'+btnText;
        html += '</span>';
    }
    html += '<span class="btn" data-dismiss="modal">';
    html += <?php echo "'".__t("Close")."'"; ?>;
    html += '</span>'; // close button
    html += '</div>';  // footer
    html += '</div>';  // content
    html += '</div>';  // dialog
    html += '</div>';  // modalWindow
    $("#"+placementId).html(html);
    $("#modalWindow").modal();
    $("#dynamicModal").modal('show');
}

Das habe ich letztendlich für meine Bedürfnisse gebraucht. Enthält auch einen Ereignishandler zum Entfernen des Modals aus dem DOM, sobald es geschlossen ist. Ich brauchte nur ein Info-Modal, also nahm ich die Übergabefunktion und die Argumente für den Schaltflächentext heraus.

function doModal(heading, formContent) {
    html =  '<div id="dynamicModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal" aria-hidden="true">';
    html += '<div class="modal-dialog">';
    html += '<div class="modal-content">';
    html += '<div class="modal-header">';
    html += '<a class="close" data-dismiss="modal">×</a>';
    html += '<h4>'+heading+'</h4>'
    html += '</div>';
    html += '<div class="modal-body">';
    html += formContent;
    html += '</div>';
    html += '<div class="modal-footer">';
    html += '<span class="btn btn-primary" data-dismiss="modal">Close</span>';
    html += '</div>';  // content
    html += '</div>';  // dialog
    html += '</div>';  // footer
    html += '</div>';  // modalWindow
    $('body').append(html);
    $("#dynamicModal").modal();
    $("#dynamicModal").modal('show');

    $('#dynamicModal').on('hidden.bs.modal', function (e) {
        $(this).remove();
    });

}
24

Mit DOM habe ich die Schaltfläche sowie das Bootstrap-Modal erstellt, das beim Klicken auf die Schaltfläche angezeigt wird.

Fügen Sie diese auch im Kopfbereich der HTML-Seite ein:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=      
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script  
src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script  
src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">     
</script>

Der gesamte Code muss in eine JS-Datei geschrieben werden.

// Zuerst erstellen Sie eine Schaltfläche, die beim Klicken den Bootstrap Modal anzeigt 

var button = document.createElement("input");
button.className = 'btn btn-info btn-lg';
button.setAttribute("type", "button");
button.setAttribute("data-toggle", "modal");
button.setAttribute("data-target", "#myModal");              
button.setAttribute("value", "More Information...");
document.getElementsByTagName('body')[0].appendChild(button);   

// MODALE ERSTELLUNG:

var div1 = document.createElement('div');
div1.id = 'myModal';
div1.className = 'modal fade';
div1.setAttribute("role", "dialog");     

var innerDiv1m = document.createElement('div');
innerDiv1m.className = 'modal-dialog modal-sm';
div1.appendChild(innerDiv1m);              

var innerDiv2m = document.createElement('div');
innerDiv2m.className = 'modal-content';
innerDiv1m.appendChild(innerDiv2m);

var innerDiv3 = document.createElement('div');
innerDiv3.className = 'modal-header';
innerDiv2m.appendChild(innerDiv3);

var buttonM = document.createElement("button");
buttonM.className = 'close';
buttonM.setAttribute("data-dismiss", "modal");
buttonM.setAttribute("aria-hidden", "true");
buttonM.setAttribute("value", "Close");
innerDiv3.appendChild(buttonM); 

var headerM = document.createElement("H4");
headerM.className = 'modal-title';
innerDiv3.appendChild(headerM);

var innerDiv31 =  document.createElement('div');
innerDiv31.className = 'modal-body';
innerDiv2m.appendChild(innerDiv31);

var para =  document.createElement('p'); 
innerDiv31.appendChild(para);
para.innerHTML = "paragraph";

var innerDiv32 =  document.createElement('div');
innerDiv32.className = 'modal-footer';
innerDiv2m.appendChild(innerDiv32);

var closeButton = document.createElement("input");
closeButton.className = 'btn btn-default';
closeButton.setAttribute("data-dismiss", "modal");
closeButton.setAttribute("type", "button");
closeButton.setAttribute("value", "Close");
innerDiv32.appendChild(closeButton);

document.getElementsByTagName('body')[0].appendChild(div1); 

// Wenn Sie auf die erstellte Schaltfläche klicken, wird der Modal auf dem Bildschirm angezeigt.

5
Khushboo Mulani

Sehr ähnliches Thema als akzeptierte Antwort, jedoch als jQuery-Plugin geschrieben. Ich habe nach einer Logik gesucht, die in ein Toolkit eingebaut werden kann.

Es gibt eine Menge Code, aber es ist dafür gedacht, einmal geschrieben zu werden und anschließend einfach aufgerufen zu werden. Als Spoiler können Sie also, sobald Sie alles eingerichtet haben, folgende Funktionen verwenden:

$.fn.alert("utils.js makes this so easy!");

Und als volles Arbeitsbeispiel:

https://jsfiddle.net/63zvqeff/

Es ist nicht erforderlich, dass <div /> auf der Seite vorhanden ist, und es funktioniert mit verschachtelten Dialogen. Es wird aus einem Toolkit genommen. Ich arbeite gerade. Deshalb habe ich alle relevanten Bits hinzugefügt, so dass es ein funktionierendes Beispiel zum Kopieren/Einfügen ist.

(function ($)
{
    $.utils = {
        // http://stackoverflow.com/a/8809472
        createUUID: function ()
        {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function")
            {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c)
            {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }
    }

    $.fn.dialogue = function (options)
    {
        var defaults = {
            title: "", content: $("<p />"),
            closeIcon: false, id: $.utils.createUUID(), open: function () { }, buttons: []
        };
        var settings = $.extend(true, {}, defaults, options);

        // create the DOM structure
        var $modal = $("<div />").attr("id", settings.id).attr("role", "dialog").addClass("modal fade")
                        .append($("<div />").addClass("modal-dialog")
                            .append($("<div />").addClass("modal-content")
                                .append($("<div />").addClass("modal-header")
                                    .append($("<h4 />").addClass("modal-title").text(settings.title)))
                                .append($("<div />").addClass("modal-body")
                                    .append(settings.content))
                                .append($("<div />").addClass("modal-footer")
                                )
                            )
                        );
        $modal.shown = false;
        $modal.dismiss = function ()
        {
            // loop until its shown
            // this is only because you can do $.fn.alert("utils.js makes this so easy!").dismiss(); in which case it will try to remove it before its finished rendering
            if (!$modal.shown)
            {
                window.setTimeout(function ()
                {
                    $modal.dismiss();
                }, 50);
                return;
            }

            // hide the dialogue
            $modal.modal("hide");
            // remove the blanking
            $modal.prev().remove();
            // remove the dialogue
            $modal.empty().remove();

            $("body").removeClass("modal-open");
        }

        if (settings.closeIcon)
            $modal.find(".modal-header").prepend($("<button />").attr("type", "button").addClass("close").html("&times;").click(function () { $modal.dismiss() }));

        // add the buttons
        var $footer = $modal.find(".modal-footer");
        for(var i=0; i < settings.buttons.length; i++)
        {
            (function (btn)
            {
                $footer.prepend($("<button />").addClass("btn btn-default")
                    .attr("id", btn.id)
                    .attr("type", "button")
                    .text(btn.text)
                    .click(function ()
                    {
                        btn.click($modal)
                    }))
            })(settings.buttons[i]);
        }

        settings.open($modal);

        $modal.on('shown.bs.modal', function (e) {
            $modal.shown = true;
        });
        // show the dialogue
        $modal.modal("show");

        return $modal;
    };
})(jQuery);

Ich habe dann eine Hilfsfunktion für die Zeiten geschrieben, in denen Sie nur eine grundlegende Benachrichtigung () wollten.

(function ($)
{
    $.fn.alert = function (message)
    {
        return $.fn.dialogue({
            title: "Alert", 
            content: $("<p />").text(message),
            closeIcon: true,
            buttons: [
                { text: "Close", id: $.utils.createUUID(), click: function ($modal) { $modal.dismiss(); } }
            ]
        });
    };

})(jQuery);

Andernfalls müssen Sie Ihren Inhalt als jQuery-Objekt erstellen und dann in Form eines Objekts wie folgt übergeben:

{
    title: "", // what ever you want in the title bar
    content: $("<p />"), // any DOM structure you can build as a jQuery object
    closeIcon: false, // does the dialogue have a X in the tilte bar to close it
    id: $.utils.createUUID(), // a reference id 
    open: function () { }, // a function called after the DOM structure is built but BEFORE rendering
    buttons: [ // an array of buttons to include in the footer
        // example "close" button, all buttons get a reference to $modal passed into them 
        // .dismiss() is a function attached to $modal to revert the DOM changes
        { text: "Close", click: function ($modal) { $modal.dismiss(); } }
    ]
};
4
Morvael

Ich hatte das gleiche Problem, nachdem ich viel recherchiert hatte, baute ich endlich eine js-Funktion auf, um Modals dynamisch auf Basis meiner Anforderungen zu erstellen. Mit dieser Funktion können Sie Popups in einer Zeile erstellen, z.

puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})

Oder Sie können andere komplexe Funktionen wie Iframes, Video-Popups usw. verwenden.

Finden Sie es auf https://github.com/aybhalala/puymodals Für die Demo gehen Sie zu http://pateladitya.com/puymodals/

0
Adi.P