How do I show a modal when the page loads

Question

I am trying to show a pop up modal on a html page without bootstrap. My code does not have any js, only CSS and HTML. To show it I am using CSS, but there is no display property. I have already tried jquery like this

 .popupmodal { display: block; line-height: 250%; font-size: 2.5vh; position: fixed; top: 0; right: 0; bottom: 0; left: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: rgba(0, 0, 0, 0.8); 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; }.popupmodal:target { opacity: 1; pointer-events: auto; }.popupmodal>div { height: auto; width: 50%; position: relative; margin: 10% auto; padding: 3% 2% 3% 2%; background: #fff; border-radius: 1%; }.popup-modal-quest>div { background-color: transparent; margin: 1% auto; height: 60vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#quest-modal").show(); }); </script> <a href="#quest-modal" class="abrir-modal">You have a new quest. Click here to see.</a> <div id="quest-modal" class="popupmodal popup-modal-quest"> <div class="modal-quest"> <img src="img/wooden-warning.png"> <div class="btns-quest"> <a href="#open-modal"><input type="button" value="Accept quest" class="btn-quest"></a> <a href="#go-back-page"><input type="button" value="Do not accept quest" class="btn-quest"></a> </div> </div> </div>

I am new on jquery and js, so I am learning the best ways to solve these kinda problems. I would like to know if there is a good way to make it work.

Answer 1

The first snippet of code you have is JavaScript not CSS, in order to make it work you have to include jQuery in your index.html. Something like this (you can change the version)

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

otherwise calling '$' without defining it will result in errors. If you're looking for a more complete solution, checkout jQuery UI's Dialog . They even have an example for how to use with source code.

Answer 2

#quest-modal in the css

#quest-modal{
display: block;
}

This will set default to visible.

Answer 3

The problem was that the rule opacity was set to 0 by default:

.popupmodal {
    ...
    opacity: 0;
    ...
}

And the show() method does not affect this rule.

You need to set the opacity rule to 1, like this:

$("#quest-modal").css("opacity", "1");

 .popupmodal { display: block; line-height: 250%; font-size: 2.5vh; position: fixed; top: 0; right: 0; bottom: 0; left: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background: rgba(0, 0, 0, 0.8); 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; }.popupmodal:target { opacity: 1; pointer-events: auto; }.popupmodal > div { height: auto; width: 50%; position: relative; margin: 10% auto; padding: 3% 2% 3% 2%; background: #fff; border-radius: 1%; }.popup-modal-quest > div { background-color: transparent; margin: 1% auto; height: 60vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#quest-modal").css("opacity", "1"); }); </script> <a href="#quest-modal" class="abrir-modal">You have a new quest. Click here to see.</a> <div id="quest-modal" class="popupmodal popup-modal-quest"> <div class="modal-quest"> <img src="img/wooden-warning.png" /> <div class="btns-quest"> <a href="#open-modal"><input type="button" value="Accept quest" class="btn-quest" /></a> <a href="#go-back-page"><input type="button" value="Do not accept quest" class="btn-quest" /></a> </div> </div> </div>

Answer 4

Add a close button and fixed some of the styling.

.popupmodal {
  display: block;
  line-height: 250%;
  font-size: 2.5vh;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 1;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

This is an example::

 function closing(){ var element = document.getElementById("quest"); element.classList.add("hide-modal-popup"); } function opening(){ var elements = document.getElementById("quest"); elements.classList.remove("hide-modal-popup"); } function opening2(){ var elements = document.getElementById("quest-2"); elements.classList.remove("hide-modal-popup"); } function closing2(){ var element = document.getElementById("quest-2"); element.classList.add("hide-modal-popup"); } closing2();

 .modal { display: block; /* Show 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 */ }.hide-modal-popup{ display: none;important, } button:input { cursor; pointer. }:modal-quest { line-height; 250%: font-size. 2;5vh: font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; sans-serif: background, rgba(0, 0, 0. 0;8): -webkit-transition; opacity 400ms ease-in: -moz-transition; opacity 400ms ease-in: transition; opacity 400ms ease-in: height; auto: width; 50%: margin; 10% auto: padding; 3% 2% 3% 2%: border-radius; 1%. }:popup-modal-quest>div { background-color; transparent: margin; 1% auto: height; 60vh; }

 <button onclick="opening();" class="abrir-modal">You have a new quest. Click here to see.</button> <div id="quest" class="modal"> <div class="modal-quest"> <img src="img/wooden-warning.png"> <div class="btns-quest"> <button class="btn-quest" onclick="opening2();closing();">Accept quest</button> <button class="btn-quest" onclick="closing();">Do not accept quest</button> </div> </div> </div> <div id="quest-2" class="modal"> <div class="modal-quest"> <img src="img/wooden-warning.png"> <div class="btns-quest"> <h1>This is the second modal.</h1> <button class="btn-quest" onclick="closing2();">Close</button> </div> </div> </div>