Turn single modal into multiple button modal

JavaScript
1

I have a modal working really well with one link using the code below, but what to do is get the code below to work with a much bigger number of links. So each button relates to displaying its own bit of text.

.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 {
background-color: #fefefe;
margin: 20% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 70%; /* Could be more or less, depending on screen size */
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

Code:

<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Text for button 1</p>
</div>
</div>

<a id="myBtn">Audits &amp; Standards</a>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

So all this works with that one single button, what I need to do is get it working with a whole number of links as below

<a id="myBtn">Audits &amp; Standards</a>
<a id="myBtn">Button2</a>
<a id="myBtn">Button2</a>
<a id="myBtn">Button3</a>
<a id="myBtn">Button4</a>
<a id="myBtn">Button5</a>
<a id="myBtn">Button6</a>
<a id="myBtn">Button7</a>
<a id="myBtn">Button8</a>

I know the id above would have to change, but wanted to keep it like this as wasnt sure how to change the script to accomodate it, and also obviously to keep the CSS as it is, and dont want to continually duplicate that either, and also that to open the nex one the one opened before needs to close first.

And the div above would have to be duplicated too to replicate the number of buttons, but again just wanted to keep it raw so i could see it done properly

2

I think I’m close, but its not quite there

<div id="myModal" class="modal">
  <div class="modal-content" id="1">
    <span class="close">&#215;</span>
    <p><span>Audits and Standards</span></p>
    <p>Text 1</p>
  </div>
  <div class="modal-content" id="2">
    <span class="close">&#215;</span>
    <p><span>Standards</span></p>
    <p>Text 2</p>
  </div>
</div>

<a id="myBtn" data-BID="1">Audits &amp; Standards</a>
<a id="myBtn" data-BID="2">Standards</a>

<script>
$(document).on('click','#myBtn',function(){
var btn = this.dataset.bid;

var modal = document.getElementById('myModal');
var modalb = btn;

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
modal.modalb.style.display = "block";
}

span.onclick = function() {
modal.modalb.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
    modal.modalb.style.display = "none";
}
}
}); 
</script>
3

Stuck it in a jsfiddle, think it will help

https://jsfiddle.net/oytmpjg2/1/

4

Same caveat as usual in that JS isn’t my strong-point but does something like this help :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
<style>
.items a {
	display:block;
	cursor:pointer;
}
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 99; /* Sit on top */
	left: 0;
	right:0;
	top: 0;
	bottom:0;
	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 {
	background-color: #fefefe;
	position:fixed;
	top:20%;
	bottom:20%;
	left:0;
	right:0;
	margin:auto;
	padding: 20px;
	border: 1px solid #888;
	width: 70%; /* Could be more or less, depending on screen size */
	display:none;
	box-sizing:border-box;
	z-index:100;
	overflow:auto;
}
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
</style>
</head>

<body>
<div id="myModal" class="modal">
  <div class="modal-content" id="a1"> <span class="close">&#215;</span>
    <p><span>Audits and Standards</span></p>
    <p>Text 1</p>
  </div>
  <div class="modal-content" id="a2"> <span class="close">&#215;</span>
    <p><span>Standards</span></p>
    <p>Text 2</p>
  </div>
  <div class="modal-content" id="a3"> <span class="close">&#215;</span>
    <p><span>Thirtd item</span></p>
    <p>Text 3</p>
  </div>
</div>
<nav class="items"> 
	<a class="myBtn" data-bid="a1">Audits &amp; Standards</a> 
	<a class="myBtn" data-bid="a2">Standards</a> 
	<a class="myBtn" data-bid="a3">third item</a>
</nav>
<script>
$(document).on('click','.myBtn',function(){
	var myTargetModal = '#' + $(this).data('bid');
	$('#myModal').hide();
	$('.modal-content').hide();
	
	$('#myModal').fadeIn();
	$(myTargetModal).fadeIn();
});

$("body" ).on( "click",".close", function() {
  	$('#myModal').hide();
	$('.modal-content').hide();
});

</script>
</body>
</html>

Remember ids are unique so you can only have one a page and ids historically should not start with a digit (although I believe that is changing) but for backward compatibility I would avoid using numbers at the start of ids.

I also tweaked the CSS as vertical margins refer to the width of the element and not the height and thus make no sense in that context.

5

Hi paul,

lol thank goodness someone come along, I was starting to hyper ventilate, and as usual it works perfectly.

Ah, just tested it on the ipad and it doesnt work, could that be the actual button isnt it working as there no href on it, not sure

6

I didn;t notice you has omitted them and yes the anchors must have href=“#” otherwise they are not clickable in ios.

<nav class="items"> 
	<a href="#" class="myBtn" data-bid="a1">Audits &amp; Standards</a> 
	<a href="#" class="myBtn" data-bid="a2">Standards</a> 
	<a href="#" class="myBtn" data-bid="a3">third item</a>
</nav>

I think they get treated just as destinations only when the href is omitted.

What I should have done is supplied the destination in the href (href=“#a1”) rather than a data attribute and then grab the destination from the href with the js.

e.g.

1 Like
7

Ye can see what you mean, works perfectly thank you Paul.

Will have to make the close ‘X’ a button too, because of the ipad issue.

Thanks again

8

No they are working ok. It’s only a elements without hrefs that are the issue,

9

Ye you’d think so wouldnt you, but for some reason the close ‘X’ doesnt work on iphones or ipad. So changed it to a href’#’ and when it closes it refreshes and the user ends up at the top of the page

10

Hi Paul,

I looked it up as I couldnt get it to work and found this answer to it and it worked.

<span class="close" onclick = "void(0)">&#215;</span>

Basically adding onclick = “void(0)” so that Safari on iOS recognizes the span element as a clickable element

11

You don’t need that just add cursor:pointer to the span.

e.g.


.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
       cursor:pointer;
  
}

The js is already adding an onclick to that element so you don’t want conflicts.

My demo above is working fine on the ipad and iphone.

12

This is starnge then, as like you say i did add the cursor:pointer to the css as below

.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
cursor:pointer;
}

And I still couldnt get it working, so it must be something possibly in the code thats over riding what you have done, so then neededing me to overwrite it again.

Thinking about it, I may have another .close going on in another css file, will take a look.

13

I’d need to see what your actual working code looks like as you may have done some things differently anyway.

The pen is working for me on the ipad and I assume it works for you also?

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.