modale bootstrap come oggetto jquery

Question

Usando l'esempio di bootstrap modale

<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 --> 

mi chiedevo se esiste un modo per fare questo, una sorta di dinamica tramite jQuery.

Il mio obiettivo è quello di avere qualcosa come una variabile chiamata $theModal che verrà inizializzata e ha proprietà per ottenere/impostare il titolo, il contenuto, le funzioni javascipt da chiamare quando si fa clic su Salva/Annulla/Chiudi ecc.

Dovrebbero essere tutti generati tramite jQuery o dovrei avere il markup nel codice e utilizzare ids/dati personalizzati-attributi per catturare il modale?

Forse qualche struttura di classe?

var $theModal = new MyModal(); 

La prossima domanda sarebbe, come creare un clone nel caso in cui una modale sia già aperta?

vorrei fare/indovinare

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

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

Questo è possibile o sono rimasto completamente sbagliato con la mia ipotesi?

Answer 1

La tua idea è neanche troppo male, ma ...

Si potrebbe avere un modale nel codice html. Quindi nello spazio dove sarebbe il tuo titolo potresti usare il tipo $ scope.

Quindi nel file js è possibile specificare le stringhe desiderate negli array e passare a quello desiderato nel parametro di una funzione ng-clic.

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

Answer 2

La vostra idea è molto buona ed è già implementato da somene. Partenza this link

Questo link ti mostra tutti i possibili casi in cui la tua idea può essere utilizzata. Ha anche alcune caratteristiche straordinarie che non abbiamo nemmeno pensato.