HTML modal popup

16

Aquí es una llanura en JavaScript ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Basic modal demo</title> 
     <style type="text/css"> 
      body { margin: 0; } 
      #shade, #modal { display: none; } 
      #shade { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; } 
      #modal { position: fixed; z-index: 101; top: 33%; left: 25%; width: 50%; } 
      #shade { background: silver; opacity: 0.5; filter: alpha(opacity=50); } 
     </style> 
    </head> 
    <body> 
     <div id="shade"></div> 
     <div id="modal"> 
      <textarea rows="5" cols="25"></textarea> 
      <button id="close">Close</button> 
     </div> 

     <p> 
      <button id="start">Start</button> 
     </p> 
     <script type="text/javascript"> 
      var modal= document.getElementById('modal'); 
      var shade= document.getElementById('shade'); 
      document.getElementById('start').onclick= function() { 
       modal.style.display=shade.style.display= 'block'; 
      }; 
      document.getElementById('close').onclick= function() { 
       modal.style.display=shade.style.display= 'none'; 
      }; 

      // This code is a workaround for IE6's lack of support for the 
      // position: fixed style. 
      // 
      if (!('maxHeight' in document.body.style)) { 
       function modalsize() { 
        var top= document.documentElement.scrollTop; 
        var winsize= document.documentElement.offsetHeight; 
        var docsize= document.documentElement.scrollHeight; 
        shade.style.height= Math.max(winsize, docsize)+'px'; 
        modal.style.top= top+Math.floor(winsize/3)+'px'; 
       }; 
       modal.style.position=shade.style.position= 'absolute'; 
       window.onscroll=window.onresize= modalsize; 
       modalsize(); 
      } 
     </script> 

    </body> 
</html>

Hay varios las mejoras que puede realizar a partir de allí, como los ataques de iframe para arreglar IE z-indexing, o encapsularlo en un objeto reutilizable, pero esa es la manera básica en que se hace.

Fuente

2010-01-02 18:43:15 bobince

+0

Gracias, voy a ver lo que has indicado .... – Hulk

+0

@bobince .. Hola señor, he usado este ejemplo en mi aplicación, mi aplicación contiene puerto de visualización y un fondo imagen. Cada vez que hago clic en el botón de inicio no debe haber desplazamiento y también el modal debe estar en el centro después del desplazamiento también modal debe estar en el centro. Pero me estoy poniendo modal en la parte superior solo ... – Mallikarjun

+1

Impresionante para finalmente ver una respuesta no-jquery, me tomé la libertad de poner tu código en un objeto javascript, http://jsfiddle.net/orwellophile/yWMdv/ – Orwellophile

2

jQueryUI tiene un plugin de diálogo modal. No va a liberar el control, simplemente haciendo clic en el fondo, como usted pidió: http://jqueryui.com/demos/dialog/#modal

<a href="#" class="showModal">Show Modal Box</a> 
<div id="modalContents" style="display:none;"> 
    <textarea>Hello World</textarea> 
</div>

-

$(".showModal").click(function(e){ 
    e.preventDefault(); 
    $("#modalContents").dialog({bgiframe: true, height: 140, modal: true}); 
});

Fuente

2010-01-02 17:15:48 Sampson

+0

Vamos a tratar esto ... Gracias. – Hulk

+0

Nota: 'bgiframe' es otro complemento que se usa para eludir algunos de los problemas de representación de formularios de IE6. – Sampson

+0

Voy a estudiar esto 2.Gracias de nuevo ... – Hulk

-1

una ventana modal por definición requiere que el usuario tome medidas antes de que pueda regresar a la ventana principal. Entonces, lo que estás buscando no es un modal sino una ventana.

Fuente

2014-01-27 19:35:39 compserve23

+0

él necesita un textarea en modal - popup –

0

html5 en cromo tiene el elemento <dialog>. Hacer experimentar con él

Fuente

2016-04-04 22:24:14 mishal153

0

HTML:

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div>

CSS:

/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content/Box */ 
.modal-content { 
    background-color: #fefefe; 
    margin: 15% auto; /* 15% from the top and centered */ 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; /* Could be more or less, depending on screen size */ 
} 

/* The Close Button */ 
.close { 
    color: #aaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: black; 
    text-decoration: none; 
    cursor: pointer; 
}

JS:

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
}

Fuente

2017-11-22 08:23:12

Respuesta

Cuestiones relacionadas