0

soy nuevo en el tema y estoy estancado con las ventanas modales!! la comunidad es la salvadora de siempre!! jaja explico mi situacion!! estoy tratando de cargar mi planilla por medio de un modal, el cual no lo se usar estoy con tutoriales y mas tutoriales. y resulta que activo mi modal por medio de mi boton asignado, pero no me aparece la ventana del modal. ya no se que hacer entonces recurro a uds les dejo el codigo por alguno pueda darme una mano..

<html lang="en">
  <head>
    <meta charset="utf-8">
    <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.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AGREGAR MEDICO</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>

    <h1 class="bg-black p-2 text-white text-center">AGREGAR MEDICO</h1>

    <div class="container">

        <form>
            <div class="mb-3">
                <label class="form-label">Nombre del Medico</label>
                <input type="text" class="form-control" id="nombre_medico">
                <div id="nom_pte_ayuda" class="form-text">NO PUEDE SER VACIO!</div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Contacto</label>
                <input type="text" class="form-control" id="contacto_medico">
            </div>
            
            
                <div class="container">
                <h2>Modal Example</h2>
                <!-- Trigger the modal with a button -->
                <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">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>
        </form>


    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html> ```

1 respuesta 1

1

No soy experto en bootstrap pero tienes una extraña mezcla de versiones y librerías en tu código, es decir, importas el css y el js de la versión 3.4.1 y también de la 5.2.3. Lo cual probablemente esté causando un conflicto. No se pueden tener dos versiones distintas de la misma librería a la vez.

He eliminado todas las librerías que había en tu fichero y he seguido las instrucciones que aparecen aquí: poner el enlace al css dentro del head y el enlace al js justo antes de la etiqueta body.

A continuación he copiado el ejemplo de modal que aparece aquí. Y parece que funciona. Puedes comprobarlo tú mismo clicando en "Ejecutar"

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
   

    <div class="container">
    <h1 class="bg-black p-2 text-white text-center">AGREGAR MEDICO</h1>
        <form>
            <div class="mb-3">
                <label class="form-label">Nombre del Medico</label>
                <input type="text" class="form-control" id="nombre_medico">
                <div id="nom_pte_ayuda" class="form-text">NO PUEDE SER VACIO!</div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Contacto</label>
                <input type="text" class="form-control" id="contacto_medico">
            </div>
            
            
             <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
            
            
       </form>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

1
  • que excelente!! muchisimas gracias por la orientacion!! ahora voy a pelear para poder cargar mi bd desde el modal!! jaja Commented el 28 nov. 2023 a las 20:34

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.