Multiple modals, work but do not close

Question

I would like to ask for assistance. So I have multiple modals linked to different buttons. They open fine and display correctly, but do not close at all unless the page is refreshed.

Here is the code:

<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('Modal1').style.display='block'">Sign 
Up</button></a></li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header">Hardware Repairs</li>
<li class="grey">£50 and up</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('Modal2').style.display='block'">Sign 
Up</button></a></li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('Modal3').style.display='block'">Sign 
Up</button></li>
</ul>
</div>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>1</p>
</div>

</div>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>2</p>
</div>

</div>

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

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>3</p>
</div>

</div>

<script>
// Get the modal
var modal = document.getElementById('Modal1');

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

// 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";
}
}
</script>

<script>
// Get the modal
var modal = document.getElementById('Modal2');

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

// 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";
}
}
</script>

<script>
// Get the modal
var modal = document.getElementById('Modal3');

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

// 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";
}
}
</script>

And here is the CSS

/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}

/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}

/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.columns {
    width: 100%;
 }
}

/* 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;
}

Possible duplicate of [Bootstrap modal: close current, open new](https://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new) — Ivar, Jun 19 '17 at 14:24

score 0 · Answer 1 · answered Jun 19 '17 at 14:46

If using bootstrap, you don't need to do this

.style.display='block'

This defeats the whole purpose of you using a framework in the first place. The bootstrap(framework) already handles this for you. All you need to do is give appropriate attributes to your elements so bootstrap recognizes them and does the task.

In your case, to make a modal work. All you need is the data-toggle="modal" and data-target="#Modal1" attributes to the trigger element(your button). These tells the framework to open a modal by the id Modal1 on click of this element.

<li class="grey">
  <button data-toggle="modal" data-target="#Modal1">Sign Up</button>
</li>

Then to close the modal, you need to give the data-dismiss="modal" on your "x" span element(you don't need the class="close" in this case).

<span data-dismiss="modal">&times;</span>

Alternatively, you could also use javascript to close the modal like so(you don't need the data-dismiss="modal" in this case)

$(".close").on('click', function() {
    $('#Modal1').modal('hide');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="columns">
  <ul class="price">
    <li class="header">Hard Drive Format</li>
    <li class="grey">£10</li>
    <li>Format Hard Drive</li>
    <li>Removes ALL Files From Drive</li>
    <li>Fresh Install Windows</li>
    <li class="grey">
      <button data-toggle="modal" data-target="#Modal1">Sign Up</button>
    </li>
  </ul>
</div>

<div id="Modal1" class="modal" data-dismiss="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>1</p>
  </div>
</div>

score 0 · Answer 2 · answered Jun 19 '17 at 14:48

TRY this code

HTML

<div class="columns">
  <ul class="price">
    <li class="header">Hard Drive Format</li>
    <li class="grey">£10</li>
    <li>Format Hard Drive</li>
    <li>Removes ALL Files From Drive</li>
    <li>Fresh Install Windows</li>
    <li class="grey"><button data-toggle="modal" data-target="#Modal1">Sign 
Up</button></a>
    </li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Hardware Repairs</li>
    <li class="grey">£50 and up</li>
    <li>Format Hard Drive</li>
    <li>Removes ALL Files From Drive</li>
    <li>Fresh Install Windows</li>
    <li class="grey"><button data-toggle="modal" data-target="#Modal2">Sign Up</button></a>
    </li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">Hard Drive Format</li>
    <li class="grey">£10</li>
    <li>Format Hard Drive</li>
    <li>Removes ALL Files From Drive</li>
    <li>Fresh Install Windows</li>
    <li class="grey"><button data-toggle="modal" data-target="#Modal3">Sign Up</button></li>
  </ul>
</div>

<!-- The Modal -->
<div id="Modal1" class="modal fade">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>1</p>
  </div>
</div>

<!-- The Modal -->
<div id="Modal2" class="modal fade">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>2</p>
  </div>
</div>



<!-- The Modal -->
<div id="Modal3" class="modal fade">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>3</p>
  </div>
</div>

CSS

/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}

/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}

/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.columns {
    width: 100%;
 }
}


/* 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;
}

remove your JS File and give a try

Hope this helps.

score 0 · Answer 3 · answered Jun 19 '17 at 14:51

0

Use the following code:

$('.modal').modal('hide');

answered Jun 19 '17 at 14:51

hhk

508
7
15

Multiple modals, work but do not close

3 Answers3