1

Hola estoy tratando de abrir un modal por medio de un select y tengo el siguiente codigo html

<select id = "numbers" onchange = "myFunction()">
 <option value = "1">1</option>
 <option value = "2">2</option>
 <option value = "3">Click me !</option>
</select>

<div class="container">
 <h2>Basic Modal Example</h2>
 <!-- Trigger the modal with a 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">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data- 
     dismiss="modal">Close</button>
    </div>
  </div>

</div>

Y la funcion de javascript que estoy usando es la siguiente:

function myFunction() {
var option_value = document.getElementById("numbers").value;
if (option_value == "3") {
    alert("Hai !");
 }
}

El problema es que al elegir la opcion 3 pues me muestra un alert, lo que busco es mostrar un modal hecho con boostrap, intente poner en vez del alert un $('#myModal').modal('show'); pero al elegir no me salia nada, de que otra manera podria hacerlo?

Gracias.

1
  • y donde esta la declaracion de tu modal en html? Commented el 26 feb. 2020 a las 22:09

2 respuestas 2

1

Te agrego la solucion solo debes modificar el contenido de tu modal

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<script>
function myFunction() {
var option_value = document.getElementById("numbers").value;
if (option_value == "3") {
  //  alert("Hai !");
   $("#myModal").modal();
 }
}
   

</script>
<select id = "numbers" onchange = "myFunction()">
 <option value = "1">1</option>
 <option value = "2">2</option>
 <option value = "3">Click me !</option>
</select>
<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a 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">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

0
1

Funciona llamando al modal con el metodo show... verifica si tu modal se encuentra en el mismo documento, o si hay una llamada externa, también seria conveniente que integres jquery a tu proyecto. Esto funciona

   <select class="custom-select" id="test">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

   $("#test").click(function() {
        var option_value = document.getElementById("test").value;
        if (option_value == "3") {
            //alert("Hai !");
         $('#TU_MODAL').modal('show');

         }

    })

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.