Finestra modale con Bootstrap

**fostex** · 24-10-2012, 20:07

Ciao,
questo script funziona ma se clicco su un bottone (ad es. "Demo 2") apro e chiudo la finestra cliccando su "Close" e poi riapro (ad es. "Demo 3") un altro bottone e clicco su "Elimina" mi elimina sia "Demo 2" che "Demo 3".

Grazie!!

Codice PHP:


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento senza titolo</title>



<link href="../assets/bootstrap/css/bootstrap.css" rel="stylesheet" />

<link href="../assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />



<script src="http://code.jquery.com/jquery-latest.js"></script>



<script src="../assets/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">  



$(function() {

    $(".delbutton").click(function(event){ 

    event.preventDefault();

      var del_id = $(this).attr('data-id');

  $('.confirmYesBtn','#myModal').click(function(e){

      e.preventDefault();

      $.ajax({

          cache: false,

          type: 'POST',

          url: 'process.php',

          data: 'id='+del_id,

          success: function(data) {    

          

             // $('#myModal').show();

              

                  

                  alert("id: "+del_id);

                      /* if(options.callback!=null)

                      options.callback(); */

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

                      $('#modalContent').show().html(data);    

                        //$('#myModal').removeData("modal");

                    $("#row_"+del_id)

                        .children('td')

                        .animate({ padding: 0 })

                        .css({ backgroundColor: "#fbc7c7" }, "slow")

                        .wrapInner('<div />')

                        .children()

                        .slideUp(function() { $(this).closest('tr').remove(); });



                    return false;

              

          }

          });

      });

    });

});



</script>

</head>



<body>

 

<table class="table table-hover">

<thead>

  <tr>

    <th>#</th>

    <th>Testo</th>

    <th>Link</th>

  </tr>

  </thead>

  <tr id="row_1">

    <td>1</td>

    <td></td>

    <td>[url="#myModal"]Demo 1[/url]

</td>

  </tr>

  <tr id="row_2">

    <td>2</td>

    <td></td>

    <td>[url="#myModal"]Demo 2[/url]

</td>

  </tr>

    <tr id="row_3">

    <td>3</td>

    <td></td>

    <td>[url="#myModal"]Demo 3[/url]

</td>

  </tr>

</table>



<div id="modalContent"></div>



<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

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

    

One fine body…</p>

  </div>

  <div class="modal-footer">

    <button class="btn" data-dismiss="modal" aria-hidden="true">Annulla</button>

    <button class="confirmYesBtn btn btn-primary">Elimina</button>

  </div>

</div>



</body>

</html>

**checkmates** · 24-10-2012, 20:59

stavo realizzando una cosa simile anche io x un'area amministrativa di un sito di immobili ma ciò dovuto rinunciare x mancanza di tempo all'effetto modal..praticamente avevo il tuo stesso problema e dovevo consegnare il lavoro..cmq leggendo in giro modal ha problemi con contenuti creati dinamicamente

**checkmates** · 24-10-2012, 21:29

prova a dare un occhiata su questo sito
http://maanasroyy.wordpress.com/2012...otstrap-modal/

**fostex** · 25-10-2012, 13:31

Ciao, Grazie della risposta
ho fatto così e sembra funzionare!
Spero che torni utile anche a te

Codice PHP:


$(function() {

    $(".delbutton").click(function(event){ 

        $('.confirmYesBtn').unbind();

          var del_id = $(this).attr('data-id');

         //$('.confirmYesBtn','#myModal').click(function(){

        $('.confirmYesBtn').bind('click', function(){

              $.ajax({

                  cache: false,

                  type: 'POST',

                  url: 'butta_process.php',

                  data: 'id='+del_id,

                  success: function(data) {    

                      //alert("id: "+del_id);

                      /* if(options.callback!=null)

                      options.callback(); */

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

                      $('#modalContent').show().html(data);    

                    $("#row_"+del_id)

                        .children('td')

                        .animate({ padding: 0 })

                        .css({ backgroundColor: "#fbc7c7" }, "slow")

                        .wrapInner('<div />')

                        .children()

                        .slideUp(function() { $(this).closest('tr').remove(); });

                    return false;

                  }

              });

          });

        event.preventDefault();

    });

});

in pratica ho cambiato:
$('.confirmYesBtn','#myModal').click(function(e){
con:
$('.confirmYesBtn').bind('click', function(){
e aggiunto:
$('.confirmYesBtn').unbind();
all'inizio.

**cassano** · 25-10-2012, 22:11

Provato con .on, credo che ormai si dovrebbe usare questo metodo.

Discussione: Finestra modale con Bootstrap

Strumenti discussione

Ricerca discussione

Visualizza

Finestra modale con Bootstrap

Permessi di invio