modal codeigniter

Question

modal codeigniter

Navigation

#1 by (0 votes)

1

I have this code but it does not open the modal, I am working with MATERIALIZE , not with BOOSTRAP

var ID_AGENTE;
jQuery.ready(function($) {
   
    $('.btn-eliminar').click(function(e){
      
      e.preventDefault();
      
      Id_Producto = $(this).attr('href');
     
      $('#modalBox').modal('show');
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
   <a href="#" class='btn btn-danger btn-eliminar'><i class="material-icons">delete</i></a>
</td>                  
<button id="modalBox" type="button" style="display: none;" class="btn btn-default waves-effect m-r-20" data-toggle="modal" data-target="#largeModal">MODAL - LARGE SIZE</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
          <h4 class="modal-title" id="largeModalLabel">Auto a Editar</h4>
        </div>
     <div class="modal-body">
     </div>
     <div class="modal-footer">
     <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">Cerrar Ventana</button>
     </div>
    </div>
  </div>
</div>

javascript

asked by JAZIEL 02.04.2017 в 00:55

source

1 answer

Problem with hidden operations in tab_page side of a tab_control? Problem with FormArray that contains a FormGroup

score 0 · Answer 1

Some considerations to take into account and possibly influence so that the modal window is not displayed

The ready () method of starting your Javascript, change by $(document).ready(function() { ... } or short% $(function() { ...}); which as shown appears to be incorrect.

Add the attribute data-target that points to the ID of your modal data-target="#largeModal"

Call method modal('open'); but without parameters as follows $('#largeModal').modal();

Do not forget to add the classes modal-action modal-close to boton in order to close the Modal window

$(function() {
	$('.btn-eliminar').click(function(e){
      e.preventDefault();
      $('#largeModal').modal();
   });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.js"></script>
<td>
   <a href="#largeModal" class='btn btn-danger btn-eliminar'><i class="material-icons">delete</i></a>
</td>                  
<button id="modalBox" type="button" style="display: none;" class="btn btn-default waves-effect m-r-20" data-toggle="modal" data-target="#largeModal">MODAL - LARGE SIZE</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
          <h4 class="modal-title" id="largeModalLabel">Auto a Editar</h4>
        </div>
     <div class="modal-body">
     </div>
     <div class="modal-footer">
     <button type="button" class="btn btn-link modal-action modal-close waves-effect" data-dismiss="modal">Cerrar Ventana</button>
     </div>
    </div>
  </div>
</div>