javascript - ventana - Cerrar Modal usando solo CSS

ventana modal bootstrap

Question

Necesito cerrar mi modal simplemente usando css como este: http://jsfiddle.net/raving/1mhsynmw/

Sin embargo, no puedo hacer que funcione. Mi modal a continuación.

function alert(msg) {
 document.getElementById("alert").innerHTML = ''<div class="modal-overlay"><div class="modal"><div class="modal-container"><h3>'' + msg + ''</h3><p>'' + msg + ''</p></div><p class="modal-footer"><a href="javascript:" id="ok">OK</a></p></div>'';
}

alert("This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal.");

body {
  font-family:arial;
  font-size:11px;
}
.modal {
     position: fixed;
     top: 20px;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     width: 200px;
     box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
     background: #fff;
}
.modal p {
  cursor:default;
}
.modal-container {
  padding: 10px;
}
.modal p a {
  color:#555;
}
.modal-footer a {
  display:block;
  border:1px solid #eee;
  width:9.5%;
  padding:3px;
  background:#fff;
  text-decoration:none;
  float:right;
}
.modal-footer {
     background: #fafafa;
     border-top: 1px solid #eee;
     margin-bottom: 0px;
  margin-top:0px;
  padding:8px;
  height:25px;
}
.modal h3 {
  margin:0px;
  white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 175px;
}
.modal-last {
  padding-bottom:0px;
}
.modal-overlay:before {
     content: '''';
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
}

<div id="alert"></div>

<h3>Content..</h3>
<p>Just to show it''s a modal</p>

PREGUNTA: ¿Hay alguna manera de cerrar el modal sin usar Javascript? Y eso no es posible, ¿cómo puedo usar Javascript para cerrar este modal?

Answer 1

En función de tu código js, ​​estás inyectando elementos modales en el document.getElementById("alert").innerHTML = ''modal stuff'' dom.getElementById document.getElementById("alert").innerHTML = ''modal stuff'' si quieres deshacerte de él, de la manera más sencilla, usa una cadena vacía como esta: document.getElementById("alert").innerHTML = ''''

CSS sería algo así como display: none .

La forma correcta de cerrarla, invocando la función javascript close, que eliminaría modal y limpiar después de sí mismo (por lo que el código antiguo ya no está allí). Este método depende de los tipos de modales y de lo que quiere lograr.

Answer 2

No creo que haya una única forma de CSS para cerrar / ocultar el modal al hacer clic en el botón Aceptar. Sin embargo, debería ser muy fácil de cerrar con Javascript simple. Dependiendo de si desea ocultar el modal (pero mantenerlo en el DOM), o eliminar realmente los elementos modales, podría implementarlo así.

 // To hide, run this inside a click callback
 document.getElementById(''modal'').classList.push(''hide'');

 .hide {
   display: hidden;
 }



 // And to remove
 var modal = document.getElementById(''modal'');
 modal.parentNode.removeChild(modal);

También debería agregar un ID de #modal a su modal, en lugar de solo una clase (a menos que desee usar document.getElementsByClassName)

Answer 3

Si no desea utilizar JQuery para cerrar el modal al hacer clic en el botón Aceptar, puede hacer algo similar al siguiente código con JavaScript simple. Deberá asignar un índice al selector para que funcione.

    //begin click event
    document.getElementById("ok").addEventListener("click",function(event){


    /* Hide the element with a class name of modal.
       note:If there is more than one element with the class name
       modal then this code will only select the first one in the
       collection of elements 
    */

    document.getElementsByClassName("modal")[0].style.display = "none";


       });//end click event