We Keep Coding

Resetting the scrolling to the top of a modal box and removing scrolling from the main page when the modal box is open

I created a modal box and if I scroll down, close it and reopen it, it is reopened where I left it. I was tried the following code to reset it to the top on reopening but it doesn't seem to work. Does anyone know what I might be doing wrong here?
I'm also looking to stop prevent the main page from scrolling when the modal box is open. How can I do that?
HTML:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-dialogue">
<div class="modal-header">
<span class="close">×</span>
<h2>Placeholder</h2>
</div>
<div class="modal-main">
<h3>Placeholder</h3>
<div class="img-text">
<img src="placeholder.png" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
<div class="img-text">
<img src="placeholder.png" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.modal-content {
background: rgba(255, 255, 255, 0.9);
padding: 40px;
width: 60%;
display: block;
margin: auto;
overflow-y: scroll;
max-height: 85%;
margin-top: 50px;
margin-bottom: 100px;
padding-left: 100px;
}
.modal {
display: none;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
padding-bottom: 100px;
width: 100%; /* Full width */
height: 75%; /* Full height */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JavaScript:
document.addEventListener("DOMContentLoaded", function () {
var modal = document.getElementsByClassName("modal");
var image = document.getElementsByClassName("myImg");
var span= document.getElementsByClassName("close");
image[0].onclick = function () {
modal[0].style.display = "block";
};
image[1].onclick = function () {
modal[1].style.display = "block";
};
span[0].onclick = function () {
modal[0].style.display = "none";
};
span[1].onclick = function () {
modal[1].style.display = "none";
};
window.onclick = function (event) {
if (event.target.classList.contains('modal')) {
for (var index in modal) {
if (typeof modal[index].style !== 'undefined') modal[index].style.display = "none";
};
};
};
});

You almost got it right, just made a mistake when attempting using jquery:
$(".mondal-content".scrollTop(0)) misspelled classname and it should've been $(".modal-content").scrollTop(0) or better yet $(modal).find(".modal-content").scrollTop(0)
Here is a way doing it without jquery:
document.addEventListener("DOMContentLoaded", function ()
{
var buttons = document.getElementsByClassName("myImg");
for(let i = 0, modal, close; i < buttons.length; i++)
{
//modal ID is stored as data-modal attribute
modal = document.getElementById(buttons[i].dataset.modal);
if (!modal)
continue;
buttons[i].onclick = function (e)
{
e.preventDefault();
e.stopPropagation();
modal.style.display = "block";
modal.querySelector(".modal-content").scrollTop = 0;
};
close = modal.querySelector(".close");
close.onclick = function()
{
modal.style.display = "none";
}
}
window.onclick = function (event) {
if (event.target.classList.contains("modal"))
{
event.target.style.display = "none";
}
};
});
.modal-content {
background: rgba(255, 255, 255, 0.9);
padding: 40px;
width: 60%;
display: block;
margin: auto;
overflow-y: scroll;
max-height: 85%;
margin-top: 50px;
margin-bottom: 100px;
padding-left: 100px;
}
.modal {
display: none;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
padding-bottom: 100px;
width: 100%; /* Full width */
height: 75%; /* Full height */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<img class="myImg" data-modal="myModal1" src="https://lh3.googleusercontent.com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w100" />
My Link
<img class="myImg" data-modal="myModal3" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h100-n-l50-sg-rj" />
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-dialogue">
<div class="modal-header">
<span class="close">×</span>
<h2>Placeholder</h2>
</div>
<div class="modal-main">
<h3>Placeholder</h3>
<div class="img-text">
<img src="https://lh3.googleusercontent.com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w500" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
<div class="img-text">
<img src="https://lh3.googleusercontent.com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w500" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-dialogue">
<div class="modal-header">
<span class="close">×</span>
<h2>Placeholder</h2>
</div>
<div class="modal-main">
<h3>Placeholder</h3>
<div class="img-text">
<img src="//www.google.com/logos/2003/anzac_day_au.gif" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
<div class="img-text">
<img src="//www.google.com/logos/2003/anzac_day_au.gif" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-dialogue">
<div class="modal-header">
<span class="close">×</span>
<h2>Placeholder</h2>
</div>
<div class="modal-main">
<h3>Placeholder</h3>
<div class="img-text">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w450-h450-n-l50-sg-rj" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
<div class="img-text">
<img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h100-n-l50-sg-rj" class="img-modal" />
<p class="text-modal">Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>

removing and adding classes to modal content elements

I have 2 modal elements. In both I have this little javascript styling element: https://jsfiddle.net/EricTalv/wjmfe799/10/
By only having one of these on one page it works fine.
The problem comes when I try to add these to my modals:
https://jsfiddle.net/EricTalv/x5qwnv82/1/
So, when I already have a class .active in the DOM the first modal works well, however, the second one doesn't function at all, and after I leave the first modal and come back, the previously selected item seems to stay there which is a nice addition but I feel like this seems to be causing problems as well.
What I want to do is to add an .active class only when one of those items is pressed, and upon leaving the last chosen item should stay.
I tried this fiddle: http://jsfiddle.net/chipChocolate/pb95kv32/
this concept could work but couldn't really get it to work, but also makes it harder to read so a more efficient solution would be great.
HTML:
<!-- The Modal 1-->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 11111</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="list-area">
<ul id="list-items-container">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal 2-->
<div class="modal" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 22222</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="list-area">
<ul id="list-items-container">
<li class="item active">other1</li>
<li class="item">other2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
var header = document.getElementById("list-items-container");
var btns = header.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
CSS:
body {
padding: 10px;
}
/* the list area */
#list-area {
background-color: #FC600A;
border: 2px solid #000;
display: inline-flex;
width: 50%;
}
#list-items-container {
padding: 0;
width: 100%;
}
#list-items-container li {
list-style: none;
font-size: 35px;
font-family: Corbel;
color: #1489B8;
padding: 0 10px 0 10px;
width: 100%;
transition: all .5s ease;
}
#list-items-container li:nth-child(odd) {
background-color: #F7E0D4;
}
#list-items-container li:hover,
#list-items-container .active {
color: red;
cursor: pointer;
padding-left: 50px;
}

You can not have duplicated ids. So I've changed #list-area to
.list-area and #list-items-container to .list-items-container in html and css code.
JS changes:
//Get all buttons
var btns = document.getElementsByClassName("item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
//for clicked item getting parentNode and all its child
var siblings = this.parentNode.childNodes
//check if children have class "active" and remove it
siblings.forEach(function(element) {
if (element.className && element.className.indexOf('active') !== -1) {
element.classList.remove("active");
}
})
//set 'active' to clicked element
this.className += " active";
});
}
Here is working updated jsfiddle https://jsfiddle.net/tehLj8b5/2/

You are using two "id" attributes with the same value (<ul id="list-items-container"></ul>). In an HTML page you are allowed to use only unique IDs, that is your problem!
var header = [].slice.call(document.querySelectorAll('.list-items-container'));
header.forEach(function(hd) {
var bts = [].slice.call(hd.querySelectorAll('.item'));
bts.forEach(function(bt) {
bt.addEventListener('click', function() {
var current = document.querySelector('.item.active');
current.className = current.className.replace(' active', '');
this.className += ' active';
});
});
});
body {
padding: 10px;
}
/* the list area */
.list-area {
background-color: #FC600A;
border: 2px solid #000;
display: inline-flex;
width: 50%;
}
.list-items-container {
padding: 0;
width: 100%;
}
.list-items-container li {
list-style: none;
font-size: 35px;
font-family: Corbel;
color: #1489B8;
padding: 0 10px 0 10px;
width: 100%;
transition: all .5s ease;
}
.list-items-container li:nth-child(odd) {
background-color: #F7E0D4;
}
.list-items-container li:hover,
.list-items-container .active {
color: red;
cursor: pointer;
padding-left: 50px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Open modal 1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">
Open modal 2
</button>
<!-- The Modal 1-->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 11111</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="list-area">
<ul class="list-items-container">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal 2-->
<div class="modal" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 22222</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="list-area">
<ul class="list-items-container">
<li class="item active">other1</li>
<li class="item">other2</li>
</ul>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You could swap you JavaScript out for this nifty little bit of jQuery. Here it'll toggle the class of active on whatever li element is clicked and remove it from it's siblings:
$('li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});

Bootstrap linking to DOM element working on one button but not another

First question here!
Basically I'm using Bootstrap, trying to use a button to link to another element on the page. I use it on one button and it works, but I use a Google Maps InfoWindow to create a new button that doesn't work. I have no idea what the difference is (other than one being added on top of the map using JQuery, but this one also changes the URL of the page!)
EDIT: The button on the InfoWindow shows up correctly and everything.
Here's the code!
JQUERY
var contentString = '<a class="portfolio-item d-block mx-auto" href="#create-report">\n' +
' <button type="button" class="btn btn-primary btn-xl">\n' +
' Reportar ocorrência\n' +
' </button>\n' +
' </a>';
var latLng = e.latLng;
if(infowindow != null)
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
position: latLng
});
HTML
<div class="portfolio-modal mfp-hide" id="create-report">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-secondary text-uppercase mb-0">Reportar Ocorrência</h2>
<hr class="star-dark mb-5">
<form name="newReport" id="reportForm" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Nome da Ocorrência</label>
<input class="form-control" id="reportName" type="text" placeholder="Nome da Ocorrência*" required="required"
data-validation-required-message="Insira o nome da ocorrência.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Localização</label>
<input class="form-control" id="reportAddress" type="text"
placeholder="Localização (morada, por exemplo)*" required="required"
data-validation-required-message="Insira a localização da ocorrência.">
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Descrição</label>
<input class="form-control" id="reportDescription" type="text" placeholder="Descrição*"
required="required" data-validation-required-message="Insira a descrição da ocorrência.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="successReport"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="reportBtn">Reportar</button>
</div>
</form>
<br>
<a id="closeFormBtn" class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
<i class="fa fa-close"></i>Fechar
</a>
</div>
</div>
</div>
</div>
CSS
.portfolio {
margin-bottom: -15px;
}
.portfolio .portfolio-item {
position: relative;
display: block;
max-width: 25rem;
margin-bottom: 15px;
}
.portfolio .portfolio-item .portfolio-item-caption {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
opacity: 0;
background-color: rgba(175, 49, 16, 0.8);
}
.portfolio .portfolio-item .portfolio-item-caption:hover {
opacity: 1;
}
.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
font-size: 1.5rem;
}
#media (min-width: 576px) {
.portfolio {
margin-bottom: -30px;
}
.portfolio .portfolio-item {
margin-bottom: 30px;
}
}
.portfolio-modal .portfolio-modal-dialog {
padding: 3rem 1rem;
height: calc(100vh - 6rem);
min-height: 850px;
margin: 1rem calc(1rem - 8px);
position: relative;
z-index: 2;
-moz-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
}
.portfolio-modal .portfolio-modal-dialog .close-button {
position: absolute;
top: 2rem;
right: 2rem;
}
.portfolio-modal .portfolio-modal-dialog .close-button i {
line-height: 38px;
}
.portfolio-modal .portfolio-modal-dialog h2 {
font-size: 2rem;
}
#media (min-width: 768px) {
.portfolio-modal .portfolio-modal-dialog {
height: calc(100vh - 6rem);
min-height: 850px;
padding: 5rem;
margin: 3rem calc(3rem - 8px);
}
.portfolio-modal .portfolio-modal-dialog h2 {
font-size: 3rem;
}
}

So Instead of
'\n' + ' \n' + ' Reportar ocorrência\n' + ' \n'
You need to use that style for the modal button trigger
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
And that for the div for the modl
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Multiple modals, work but do not close

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">×</span>
<p>1</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>2</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</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;
}

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">×</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">×</span>
<p>1</p>
</div>
</div>

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">×</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">×</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">×</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.

Use the following code:
$('.modal').modal('hide');

bootstrap modal overflow issue

I have a Bootstrap modal with a button. When I click the button it shows a right under the button. The contains a ul list with anchor links in it.
The problem is that if I don't set the height to a higher value then that inside the modal the last items is not visislbe because the div is outside the modal.
I don't want to use overflow because i don't want it to scroll. The inside the modal is a dropdown menu which i made my self.
The CSS for the :
.wrapper-for-dropdown {
width: 300px;
z-index:9999;
color: #333;
background-color: #fff;
position: absolute;
display: none;
border: solid;
border-width: 1px;
border-radius: 4px;
border-color: #ccc;
z-index:32432423432;
overflow-wrap:normal;
}
.wrapper-for-dropdown:hover {
border: solid;
border-width: 1px;
border-color: #ccc;
}
.dropdown-ul {
list-style-type: none;
-moz-st color: white;
text-align: left;
padding-left: 10px;
overflow-y: visible;
}
.dropdown-ul li {
float: left;
display: inline-block;
height: auto;
width: 250px;
}
.dropdown-ul li:hover {
}
.dropdown-ul li a {
color: #38546d;
display: block;
float: left;
}
.dropdown-ul li a:hover {
color: black;
display: block;
float: left;
}
HTML:
<!-- Modal -->
<div class="modal" id="modalCreateNewManualResync" tabindex="-1" role="dialog" aria-labelledby="modalCreateNewManualResyncLabel" aria-hidden="true">
<div class="modal-dialog" id="createNewSyncDialog">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalCreateNewManualResyncLabel">Create New Resync
</h4>
</div>
<!-- Model Body -->
<div class="modal-body" >
<div class="container-fluid">
<div class="modal-content-div">
<label>Company:</label>
<label>Sync Reason:</label>
</div>
<div class="modal-content-div-data">
<button class="btn btn-default" id="buttonCompaniesList" onclick="listCompaniesToogle();" type="button" style="display: inline-block; width: 180px;">Select Company<span id="spanArrowIndicator" style="margin-left: 10px; margin-right: 10px;" class="caret"></span></button>
<div id="wraptest" class="wrapper-for-dropdown">
<ul id="ulcompanies" class="dropdown-ul">
</ul>
</div>
<input type="text" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close<span style="margin-left: 10px;" class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="btn btn-default">Create<span style="margin-left: 10px;" class="glyphicon glyphicon-ok"></span></button>
</div>
</div>
</div>
<!--End Of Modal Body -->
</div>
</div>
![Current example of the GUI. Italy and International is not clickable.][1]
[1]Italy and International is not clickable: http://i.stack.imgur.com/uVcLj.jpg

Adding
.modal {overflow: visible}
Solved the issue. Do not add anything else to .model-body.
Also removing some other style on my own div solved the issue. Setting the height to auto as well.
Thanks.