Consolidating jQuery

JavaScript
1

Hopefully someone here can help me out or at least give me some good pointers.

I am working with the modals from the Codepen https://codepen.io/scottohara/pen/OEeBJe. That code works just fine but I need to use multiple modals and this code is only for 2.

I can add variables like this but this will get out of hand

var btn3 = document.getElementById('m-button3');
var btn4 = document.getElementById('m-button4');

var dialog3 = document.getElementById('m-dialog3');
var dialog4 = document.getElementById('m-dialog4');

these functions that revert the HTML to normal upon close will also need to be consolidated:

btn.addEventListener('click', function () {});
btnClose.addEventListener('click', function () {});

Is this the best code to use or can you suggest another?

2

How many modals are you thinking of having?

Will there ever be more than one modal showing at the same time?

3

There will be about 15 modals, but only 1 showing at a time.

4

Will all the modals have the same look and feel, but just different content or will the content be the same?

What will be the trigger for a given modal to appear in general?

5

they will be styled the same but with unique content in each one.

6

the trigger will be a simple button click

7

I assume there will be a different button for each modal?

8

correctly assumed, yes.

9

Can you give an example of the content of two such modals? I have an idea for a solution, but it might depend on the content you plan to use inside the modals. Is it just text or is it html (containing other elements)?

Also, how are the buttons which open the modals arranged in the page. Are they scattered or grouped together in a similar fashion. It would be great if you have the code for the buttons already written and can showcase it in another Codepen.

10

header
text paragraph
shortcode for an audioplayer (This is on a WP site)

11

So you are manually adding these buttons and not dynamically creating them?

12

It is a custom page within a site so I am manually adding the whole thing.

13

I have never used WP, but I assume you can have a script section for the page. I recommend having a single modal and then adding a click event listener to each button along with having a unique id for each of these buttons.

Next create a function which you will use as the callback for the click event’s handler and capture the id of the targeted button. Next, I would have an object like the following which contains the information needed for applicable modal.

const modalsContent = {
  uniqeId01: {
   header: 'header title',
   text: 'some text',
   audiofile: 'url for audio?'
  },
  uniqeId02: {
   header: 'header title',
   text: 'some text',
   audiofile: 'url for audio?'
  },
  .
  .
  .
}

Then, since you will get the unique id from the event handler callback function’s event argument, you can dynamically populate the correct modal content and display the modal. Also, you will just need a single button close click handler which will reside on the single modal’s close button.

14

Hmm, yes this could work. Thank you for the advice.

15