1

Tengo un botón que me despliega una ventana modal con bootstrap.

<button id="btnPrueba" type="button" data-toggle="modal" data-target="#VentanaProducto" style="height: auto; background-color: lightgray;">

Pero ahora necesito evaluar antes de desplegar la ventana modal que de la siguiente lista haya sido seleccionado Argentina

<select name="Comb" id="Contenido" class="form-control">
	<option value="0">-</option>
	<option value="12">Argentina</option>
	<option value="44">Colombia</option>
</select>

Gracias

4 respuestas 4

0

no entiendo muy bien tu pregunta. Pero según lo que conseguí entender te hice una pequeña demo.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DEMO </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

    <select name="Comb" id="Contenido" class="form-control">
      <option value="0">-</option>
      <option value="12">Argentina</option>
      <option value="44">Colombia</option>
    </select>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        aqui la informacion
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Y tu archivo js seria algo por el estilo.

$(document).ready(function(){
    $("#Contenido").change(function(){
    //Seleccionar el value del campo seleccionado.
    var val = $(this).find('option:selected').val();

    //Significa que es Argentina en este caso.
    if(val == 12){
     //Mostramos el modal
     $("#exampleModal").modal('show');
    }
  });
});
0

Puedes hacerlo con Jquery, creando el evento onclick y comprobando el valor:

<button id="btnPrueba" type="button" data-toggle="modal" style="height: auto; background-color: lightgray;" onclick="validar()">


<script>

    function validar(){

        if ($("#Contenido").val() == "12")
        {
            $('#VentanaProducto').modal('show');
        }
        else{
            return false;
        }
    }

</script>
0

Lo primero sería hacer un evento cuando ocurra el clic sobre el botón.

Lo siguiente sería obtener el valor del select y lo comparas con tu resultado

Y luego por último muestras tu modal.

$('#validador').click(function(){
  var select =$('#contenido').val();
  if(select == 12){
    $('#myModal').modal('show')
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<select name="Comb" id="contenido" class="form-control">
	<option value="0">-</option>
	<option value="12">Argentina</option>
	<option value="44">Colombia</option>
</select>

<a class="btn btn-primary btn-lg" id="validador">
  Launch demo modal
</a>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <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 -->

2
  • Agrega una explicación de por qué tu código funciona y soluciona el problema planteado, "espero te sirva" no es suficiente.
    – Shaz
    Commented el 23 mar. 2018 a las 17:57
  • Ya lo edite @Shaz Commented el 23 mar. 2018 a las 18:01
-1

No entendí muy bien lo de desplegar; no sé si te refieres al mostrar el modal o al cerrarlo. Como sea, usa la propiedad

$("#myModal").on("hidden.bs.modal", function () {
    // evento al cerrar el modal
});

o

$("#myModal").on("show.bs.modal", function () {
    // evento al mostrar el modal
});

Y dentro puedes capturar los datos antes que se muestre o cuando se oculte el modal.

En tu caso, obviamente usarías el id de tu modal: $("#btnPrueba").

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.