jquery - Comment ouvrir automatiquement une fenêtre contextuelle uniquement CSS au chargement de la page/en utilisant Javascript ?

J'ai créé une fenêtre contextuelle uniquement en CSS qui fonctionne uniquement en cliquant sur le lien/bouton. Je veux afficher cette fenêtre contextuelle automatiquement au chargement de la page. De plus, comment cette fenêtre contextuelle peut-elle être ouverte sans cliquer sur le lien/bouton, c'est-à-dire en utilisant Javascript/jQuery.

Violon

.modalDialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: #339999;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>

    <p style="color:white">This is a sample modal box that can be created using the powers of CSS3.</p>

  </div>
</div>

Merci d'avance

Réponse #1

Il n'est pas nécessaire d'utiliser jQuery, vous pouvez accomplir cela en utilisant du Javascript pur. Pour ouvrir la fenêtre contextuelle automatiquement au chargement de la page, réglez le hash sur l'id de la fenêtre contextuelle.

Démo

function openPopup() {
  window.location.hash = 'openModal';
}

window.onload = openPopup;

.modalDialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: #339999;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>

    <p style="color:white">This is a sample modal box that can be created using the powers of CSS3.</p>

  </div>
</div>

<br />
<br />
<button onclick="openPopup()">Open popup by Javascript</button>

Vous pouvez également créer une fonction générique pour ouvrir les pop-ups :

function openPopup(popupId) {
    window.location.hash = popupId;
}

Réponse #2

Comme vous ne faites que masquer la fenêtre contextuelle en utilisant l'opacité CSS, vous pouvez simplement utiliser jQuery au chargement de la page pour afficher la fenêtre contextuelle ou la faire apparaître en fondu si vous voulez ajouter un peu d'animation.

Il est également probablement une bonne idée de définir l'affichage du popup à none dans le CSS, sinon vous pourriez rencontrer des problèmes plus tard. Vous pourriez faire quelque chose comme :

.modalDialog {
  //added display none on element
  display:none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  //opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

$(document).ready(function() {
  //Use jQuery to show the popup
  $('.modalDialog').show();
  //Alternativly use jQuery to fadeIn the popup
  $('.modalDialog').fadeIn()
})

Code final mis à jour : https://jsfiddle.net/q4n7p0jx/1/