activar ventana emergente o div id en el documento listo

Necesito ayuda para activar ventana emergente en la carga de la página.

Actualmente, la ventana emergente se abrirá cuando haga clic en el enlace “hola”.

Resultado Esperado:

Popup debe abrir sin hacer clic en el hipervínculo o emergente en el documento listo

HTML

hello 

CSS

 body { font-family: Arial, sans-serif; background-size: cover; } .box { margin: 6% auto 3% auto; padding: 35px; background-clip: padding-box; text-align: center; } .button, .button1 { padding: 1.5% 4% 1.5% 4%; margin: 2%!important; text-decoration:none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; margin: 0 auto; -webkit-border-radius: 40px; border-radius: 40px; font: normal 1em; text-align: center; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 1px; background: rgba(0,0,0,0); -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); } .button{ border: 2px solid rgb(30,205,151); color: rgb(30, 205, 151); } .button1{ border: 2px solid orange; color: orange; } .button:hover { background: rgb(30,205,151); color:#fff; } .button1:hover { background: orange; color:#fff; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 5% 2%; background: #fff; border-radius: 40px; border:10px solid #ccc; width: 50%; border:3px solid rgba(55, 174, 204, 0.9); position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #666; font-size: 40px; text-align:center; font-family: Tahoma, Arial, sans-serif; padding-bottom:10px; margin:0; } .popup h1 { margin-top: 0; color: #333; font-size:40px; text-align:center; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 0px; right: 2%; transition: all 200ms; font-size: 80px; font-weight: bold; text-decoration: none; border-radius:50px; color: #333; } .popup .close:before { content: "×"; } .popup .close:hover { color: orange; } .popup .content { max-height: 30%; text-align:center; overflow: auto; } .product{ color:#777; } .contentSpec{ margin:0 auto; text-align:center; } 

JS

 $(document).ready(function() { $(".button2").trigger('click'); }); 

VIOLÍN

Cualquier ayuda se agradece, gracias por adelantado.

¿Creo que esto es lo que estás buscando?

 $(document).ready(function() { window.location.hash = "#popup1"; }); 

Este es el violín actualizado

Simplemente use este código en document.ready() :

 window.location="#popup1"; 

Aquí está su JSFiddle actualizado

Aquí está la demo de CodePen ya que JSFiddle está estropeando y no actualizando adecuadamente


Código completo:

 $(document).ready(function() { //$(".button2").trigger('click'); window.location="#popup1"; }); $(".button").click(function(){ window.location="http://www.google.com/"; }); $(".button1").click(function(){ window.location="http://www.facebook.com/"; }); 
 body { font-family: Arial, sans-serif; background-size: cover; } .box { margin: 6% auto 3% auto; padding: 35px; background-clip: padding-box; text-align: center; } .button, .button1 { padding: 1.5% 4% 1.5% 4%; margin: 2%!important; text-decoration:none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; margin: 0 auto; -webkit-border-radius: 40px; border-radius: 40px; font: normal 1em; text-align: center; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 1px; background: rgba(0,0,0,0); -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0); } .button{ border: 2px solid rgb(30,205,151); color: rgb(30, 205, 151); } .button1{ border: 2px solid orange; color: orange; } .button:hover { background: rgb(30,205,151); color:#fff; } .button1:hover { background: orange; color:#fff; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 5% 2%; background: #fff; border-radius: 40px; border:10px solid #ccc; width: 50%; border:3px solid rgba(55, 174, 204, 0.9); position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #666; font-size: 40px; text-align:center; font-family: Tahoma, Arial, sans-serif; padding-bottom:10px; margin:0; } .popup h1 { margin-top: 0; color: #333; font-size:40px; text-align:center; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 0px; right: 2%; transition: all 200ms; font-size: 80px; font-weight: bold; text-decoration: none; border-radius:50px; color: #333; } .popup .close:before { content: "×"; } .popup .close:hover { color: orange; } .popup .content { max-height: 30%; text-align:center; overflow: auto; } .product{ color:#777; } .contentSpec{ margin:0 auto; text-align:center; } 
  hello 

Necesitas usar:

 $(document).ready(function() { $(".button2")[0].click(); }); 

Porque necesita activar el método de clic DOM API nativo. [0] devuelve el nodo DOM, esto es equivalente a get (0). De lo contrario, si activa el evento click () en el objeto jQuery, el método nativo se descarta específicamente.

Eche un vistazo a esta pregunta SO