5

Am Beispiel von Haaren aus dem Sumpf modalBootstrap-modal als jquery Objekt

<div class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

ich mich gefragt, ob es einen Weg gibt, dies zu machen, eine Art dynamische über jQuery.

Mein Ziel ist es so etwas wie eine Variable $theModal genannt zu haben, die initialisiert werden und haben Eigenschaften, zum Ermitteln/Setzen Sie den Titel, den Inhalt, die JavaScipt-Funktionen aufgerufen werden, wenn Speicher/Abbrechen/Schließen geklickt wird usw.

Sollen alle über jQuery erzeugt werden oder sollte ich das Markup im Code haben und Ids/benutzerdefinierte Daten-Attribute verwenden, um das Modal zu fangen?

Vielleicht eine Klassenstruktur? Die nächste Frage wäre, wie man einen Klon erstellt, falls ein Modal bereits geöffnet ist?

würde ich machen/

var $theClone = $theModal.clone().init(); 

$theClone.title = "Title of the second modal"; 
$theClone.content = $.ajax(url); 
$theClone.saveAction = saveTheContentOfTheContent; 
$theClone.show(); 

erraten Ist das möglich oder bin ich mit meinen Annahmen völlig falsch?

Antwort

0

Ihre Idee ist nicht schlecht, aber ...

Sie könnten ein modal in Ihrem HTML-Code. Dann in dem Feld, wo Ihr Titel wäre, könnten Sie den $ Scope-Typ verwenden.

Dann könnten Sie in Ihrer js-Datei die Zeichenfolgen angeben, die Sie in Arrays haben möchten, und einfach zu dem gewünschten Parameter im Parameter einer ng-click-Funktion wechseln.

index.html

<p>This is the modal view.</p> 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">{{msgArray.title}}</h4> 
     </div> 
     <div class="modal-body"> 
      <p>{{msgArray.body}}</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">{{msgArray.btn}}</button> 
     </div> 
     </div> 

    </div> 
    </div> 

script.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
     $scope.msgArray1 = { 
     title : "Modal 1", 
     body: "This is the co to say anything you want here.", 
     btn : "Close", 
    }; 
    $scope.msgArray2 = { 
     title : "Modal 2", 
     body: "This is the co to say anything you want here.", 
     btn : "Close", 
    }; 

     $scope.msgTemp = { 
     title : "", 
     body: "", 
     btn : "", 
    }; 

    $scope.openModal = function(modal){ 

     if(modal == "modal1"){ 
     $scope.msgTemp = $scope.msgArray1; 
     } 
       if(modal == "modal2"){ 
     $scope.msgTemp = $scope.msgArray2; 
     } 

     $("#myModal").modal('show'); 

    } 

}); 

http://plnkr.co/edit/nV3iq1U1ymcsBAXT6g2y?p=preview

0

Ihre Idee ist sehr gut und es bereits von somene umgesetzt wird. Überprüfen Sie heraus this link

Dieser Link zeigt Ihnen alle möglichen Fall-Szenario, in denen Ihre Idee verwendet werden kann. Es hat auch einige großartige Eigenschaften, an die wir nicht einmal gedacht haben.