How to make PopUp appear by JavaScript when done with CSS

Question

How to make PopUp appear by JavaScript when done with CSS

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I have a PopUp modal that is not done in JavaScript only with HTML and CSS, I need to send it to call with JavaScipt but I do not know how.

The button with which I'm calling from HTML

<a class="modal-open" href="#modal">PopUp Modal</a>

What appears after clicking on the button

 <div class="modal" id="modal">
  <div class="modal-content">
    <a href="#" class="modal-close" title="Close Modal">X</a>
    <h3>Titulo</h3>
    <div class="modal-area">
      <p>Contenido</p>
    </div>
  </div>
</div>

The CSS I use for PopUp

* {
  padding:0;
  margin:0;
  position:relative;
  box-sizing:border-box;
  -webkit-font-smoothing: subpixel-antialiased !important; 
  -webkit-backface-visibility: hidden; 
}
body, html {
    height:100%;
    min-height:100%;
  font-size: 14px;
  overflow-x:hidden;
  background: #036AB3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth:always;
  background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%);
  color:#424242;
}
p {
  margin-bottom:1em;
}

a.modal-open {
  display:block;
  padding:20px;
  color:#424242;
  font-weight:bold;
  margin:50px auto;
  width:200px;
  background:#e0e0e0;
  border-radius:2px;
  text-align:center;
  text-decoration:none;
}
.modal {
  background:rgba(0,0,0,0.7);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  bottom:0px;
  transition:all .5s ease-in-out;
  opacity:0;
  z-index:-1;
}
.modal:target {
  opacity:1;
  transition:all .5s ease-in-out;
  z-index:+1;
}
.modal-content {
  position:fixed;
  top:50%;
  left:50%;
  width:500px;
  background:#fff;
  border-radius:4px;
  transform:translate(-50%, -200%);
  transition:all .5s ease-in-out;
  perspective: 1000;
  outline:1px solid transparent;
  opacity:0;
}
.modal:target .modal-content {
  transform:translate(-50%, -50%);
  transition:all .5s ease-in-out;
  transition-delay:.5s;
  z-index:9999;
  opacity:1;
}
.modal-close {
  float:right;
  text-decoration:none;
  padding:22px 22px;
  color:#424242;
  font-weight:800;
  transition:all .5s ease-in-out;
  z-index:+1;
  background:rgba(0,0,0,0.1);
  text-align:center;
  border-radius:0 4px 0 0;
}
.modal-close:hover {
  color:#fff;
  background:rgba(0,0,0,0.5);
}
.modal-content h3 {
  padding:20px;
  display:block;
  text-align:center;
  border-bottom:1px solid #e0e0e0;
  text-transform:uppercase;
  background:rgba(2,162,239,1);
  color:#fff;
  border-radius:4px 4px 0 0;
}
.modal-area {
  padding:20px;
}

Thank you in advance for reading, any recommendations will be welcome too

javascript html css

asked by Thunder 04.04.2018 в 18:26

source

2 answers

Can I use several requests in a laravel 5.3 mutators? How to get the value of a cell from a DataGrid?

score 2 · Answer 1

Consider the pseudo class :target :

represents the unique element, if any, with an id matching the fragment identifier of the document's URI.

To open the modal, what you need to indicate to the browser is a URI with an identifier of the element within the document to call.

For this you can use location.hash which emulates exactly what happens when it's done click on <a href="#modal" .

Example:

function openModal(target) {
  location.hash = '#' + target;
}

* {
  padding:0;
  margin:0;
  position:relative;
  box-sizing:border-box;
  -webkit-font-smoothing: subpixel-antialiased !important; 
  -webkit-backface-visibility: hidden; 
}
body, html {
    height:100%;
    min-height:100%;
  font-size: 14px;
  overflow-x:hidden;
  background: #036AB3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth:always;
  background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%);
  color:#424242;
}
p {
  margin-bottom:1em;
}

a.modal-open {
  display:block;
  padding:20px;
  color:#424242;
  font-weight:bold;
  margin:50px auto;
  width:200px;
  background:#e0e0e0;
  border-radius:2px;
  text-align:center;
  text-decoration:none;
}
.modal {
  background:rgba(0,0,0,0.7);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  bottom:0px;
  transition:all .5s ease-in-out;
  opacity:0;
  z-index:-1;
}
.modal:target {
  opacity:1;
  transition:all .5s ease-in-out;
  z-index:+1;
}
.modal-content {
  position:fixed;
  top:50%;
  left:50%;
  width:500px;
  background:#fff;
  border-radius:4px;
  transform:translate(-50%, -200%);
  transition:all .5s ease-in-out;
  perspective: 1000;
  outline:1px solid transparent;
  opacity:0;
}
.modal:target .modal-content {
  transform:translate(-50%, -50%);
  transition:all .5s ease-in-out;
  transition-delay:.5s;
  z-index:9999;
  opacity:1;
}
.modal-close {
  float:right;
  text-decoration:none;
  padding:22px 22px;
  color:#424242;
  font-weight:800;
  transition:all .5s ease-in-out;
  z-index:+1;
  background:rgba(0,0,0,0.1);
  text-align:center;
  border-radius:0 4px 0 0;
}
.modal-close:hover {
  color:#fff;
  background:rgba(0,0,0,0.5);
}
.modal-content h3 {
  padding:20px;
  display:block;
  text-align:center;
  border-bottom:1px solid #e0e0e0;
  text-transform:uppercase;
  background:rgba(2,162,239,1);
  color:#fff;
  border-radius:4px 4px 0 0;
}
.modal-area {
  padding:20px;
}

<a class="modal-open" href="#modal">PopUp Modal</a>

<a class="modal-open" onclick="openModal('modal')">PopUp Modal con JS</a>

 <div class="modal" id="modal">
  <div class="modal-content">
    <a href="#" class="modal-close" title="Close Modal">X</a>
    <h3>Titulo</h3>
    <div class="modal-area">
      <p>Contenido</p>
    </div>
  </div>
</div>

score 1 · Answer 2

First call your modal:

var modal = document.getElementById("modal");

For show your modal use the following function:

modal.showModal();

Place it in the part you want to be displayed, or to call it from the html use:

<a class="modal-open" data-toggle="modal" data-target="#modal">PopUp Modal</a>