Turning linkButton into a modal button

HTML & CSS
1

Only one button is opening up to a modal of button links on the screen.

Clicking the link button on the screen should open up to a modal of links.

Right now I am trying to get the flow of it right.

Replicating how it was done the first time.

Where it says Links, I am going to add other buttons next to it, but they are not opening up to modals, only the links button will.

Only the links button will open up into a modal.

Here is what I have now: https://jsfiddle.net/rysbm8w2/3/

.linkButton {
    flex-basis: 183px;
    /* width of each button */
    margin: 0;
    /* spacing between buttons */

    cursor: pointer;
}

.containerD.hide {
  display: none;
}

.buttonContainerC {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    max-width: 569px;
    gap: 10px;

}
.containerD.active {
  /* display: flex;*/
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
  padding: 8px 8px;
}


  <div class="containerC hide">
    <div class="buttonContainerB"></div>
    <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
  </div>


  <div class="containerD hide">
  
   <div class="modal-content">
    <div class="buttonContainerC">

    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
    <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
  </div>
   <button class="exitD exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
  
  </div>



(function manageLinks() {

  const linksButton = [{
      buttonClass: "linkButton btn-primary btn",
      title: "Links"
    }
  
  ];
  
  const buttonContainer = document.querySelector(".buttonContainerB");

  linksButton.forEach(function(links) {
    const button = document.createElement("button");
    button.className = links.buttonClass;
    button.textContent = links.title;
    button.classList.add("linkButton", "btnC", "btn-primaryC");
    buttonContainer.appendChild(button);
  });
})();


(function manageLinkButtonOpen() {

  function hideContainer(containerSelector) {
    const container = document.querySelector(containerSelector);
    container.classList.add("hide");
  }

  function showContainer(containerSelector) {
    const container = document.querySelector(containerSelector);
    container.classList.remove("hide");
  }

  function resetPage() {
    //hideContainer(".containerC");
    showContainer(".containerD");

    const containerD = document.querySelector(".containerD");

    containerD.classList.add("active");
  }

  function exitClickHandler() {
    resetPage();
  }
  const exit = document.querySelector(".linkButton");
  exit.addEventListener("click", exitClickHandler);
}());

  (function manageLinkButtonClose() {

    function hideContainer(containerSelector) {
      const container = document.querySelector(containerSelector);
      container.classList.add("hide");
    }

    function showContainer(containerSelector) {
      const container = document.querySelector(containerSelector);
      container.classList.remove("hide");
    }

    function resetPage() {
      hideContainer(".containerD");
      showContainer(".containerC");
    }

    function exitClickHandler() {
      resetPage();
    }
    const exit = document.querySelector(".exitD");
    exit.addEventListener("click", exitClickHandler);
  }());
2

I’m not quite sure what the question was?

You seem to have it functioning ok and to be honest its only you that knows whether the way it works is right or not.:wink:

1 Like
3

I should be able to see the links button underneath the orange when set a transparent.

I am up to doing that part in the code.

Maybe I should write the HTML part similar to how the first one was written, and then go from there.

I’m lost:

Now I have this: https://jsfiddle.net/vr68btqo/7/

(function manageLinks() {

  const linksButton = [{
      buttonClass: "linkButton btn-primary btn",
      title: "Links"
    }
  
  ];
  
  const buttonContainer = document.querySelector(".buttonContainerB");

  linksButton.forEach(function(links) {
    const button = document.createElement("button");
    button.className = links.buttonClass;
    button.textContent = links.title;
    button.classList.add("linkButton", "btnC", "btn-primaryC");
    button.setAttribute("data-destination", "#lb"); // Added this line
    buttonContainer.appendChild(button);
  });
})();

(function manageLinkButtonOpen() {


function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
    modal.querySelector(".curtainB").classList.add("slide");
    modal.querySelector(".wrapB").classList.add("visible");
  }
  
  
  function addPlayerToButtons() {
    const modalButtons = document.querySelectorAll(".linkButton");
    modalButtons.forEach(function(button, index) {
      button.addEventListener("click", function(event) {
        //const target = event.currentTarget.dataset.destination;
        //openModal(target);
        openModal(event.currentTarget.dataset.destination);
    
      });
    });
  }
  addPlayerToButtons();

}());

  (function manageLinkButtonClose() {
  
  
  function closeModal(modal) {
    modal.classList.remove("active");
    modal.querySelector(".curtainB").classList.add("hide");
    modal.querySelector(".wrapB").classList.remove("visible");
  }

  function addCloseEventToModals() {
    const closeModals = document.querySelectorAll(".close");
    closeModals.forEach(function(modal) {
      modal.addEventListener("click", function(event) {
        //const currentModal = event.target.closest(".modal");
        //closeModal(currentModal);
        closeModal(event.target.closest(".modal"));
      });
    });
  }
  addCloseEventToModals();
  }());
4

All I am trying to figure out how to do with this one is,

Have only one button link that opens up into a modal.

That is all.

Other buttons will accompany the links button, but only the links button will open up into a modal.

It was done the first time with the videos.

Replicating that where only one opens up into a modal.

5

I have it working now: https://jsfiddle.net/fvyanse2/

I think the js now is ok.

Anything you would change or adjust?

	<div class="containerC hide">
		<div class="modal-contentA">
			<div class="buttonContainerB">
				<!--- <button data-destination="#lb" class="linkButton btn-primaryC btnC">linkButton</button>--->

			</div>
			<button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
		</div>
		<div id="lb" class="modalB">
			<div class="inner-modalB">

				<div class="buttonContainerC">
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
					<a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
				</div>
				<div class="linkButton"></div>


				<button class="closeB exit">&times</button>
			</div>
		</div>
	</div>

(function manageLinks() {

  const linksButton = [{
    buttonClass: "linkButton btn-primary btn",
    title: "Links"
  }

  ];

  const buttonContainer = document.querySelector(".buttonContainerB");

  linksButton.forEach(function (links) {
    const button = document.createElement("button");
    button.className = links.buttonClass;
    button.textContent = links.title;
    button.classList.add("linkButton", "btnC", "btn-primaryC");
    button.setAttribute("data-destination", "#lb"); // Added this line
    buttonContainer.appendChild(button);
  });
})();

(function manageLinkButtonOpen() {

  function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
  }
  function addLinkToButton() {
    const modalButton = document.querySelector(".linkButton");
    modalButton.addEventListener("click", function (event) {
      //const target = event.currentTarget.dataset.destination;
      //openModal(target);
      openModal(event.currentTarget.dataset.destination);

    });
  }
  addLinkToButton();

}());

(function manageLinkButtonClose() {


  function closeModal(modal) {
    modal.classList.remove("active");
  }

 function addCloseEventToModal() {
    const closeModals = document.querySelectorAll(".closeB");
    closeModals.forEach(function (modal) {
      modal.addEventListener("click", function (event) {
        //closeModal(event.target.closest(".modalB"));
        closeModal(document.querySelector(".modalB"));
      });
    });
  }
  addCloseEventToModal();
}());
1 Like
6

Why are both not aligned? https://jsfiddle.net/ckLuxo7y/

The buttons in-front and underneath should both be aligned together.

How come they are not?

Clicking on the “Links” button opens the modal.

Does this have to do with me not understanding how modals work, or is it something else?

7

In one container that button is in the flow and takes up space and in the other container it is absolutely placed and takes up no space in the flow.

Position both buttons with the same rules to get the same effect.

1 Like
8

I’m confused and don’t know what I’m doing.

I’m having trouble figuring this out.

I need help figuring this out.

None of these worked: relative, fixed, absolute.

.modalB, 
.inner-modalB {
  position:
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto
}

These two?

.containerC {
  /*display: flex;
  flex-wrap: wrap;
  flex-direction: column;*/
  /* added*/
  /* min-height: 100%;*/
  margin: auto;
  /* justify-content: center;
  align-content: center;*/
}

.modalB {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

None of these worked: relative, fixed, absolute.

.containerC, 
.modalB {
  position:
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto
}
9

Is this still the button at the bottom question :slight_smile:

If so you only need to change the code for the button itself as the rest will line up.

10

What do you mean?

“Button at the bottom question”

I don’t know what that is referring to.

The buttons on top, and the buttons underneath.

Aligning them so that they are together.

Trying to have these be aligned.

This is full screen.

11

It’s only the button at the bottom that is misplaced. The main panels are perfectly aligned but the buttons have different rules which puts everything out.

If you don’t know what I mean then set both those X buttons to display: none and you will see all the rest of the page now line up.

I would suggest that you make both buttons position:absolute and then try to match their positions. I’m not at a computer until tomorrow so you will need to try yourself. :slight_smile:

12

With the x button removed, both are aligned now:

13

Yes, now you just have to place the x buttons without breaking the rest of the page.

14

I think this is ok now: https://jsfiddle.net/1jhom5Lc/3/

Look good to you?

.modal-footer {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: calc(16px - (8px * 0.5));
    background-color: transparent;
    border-top: 1px solid transparent;
    border-bottom-right-radius: calc(8px - 1px);
    border-bottom-left-radius: calc(8px - 1px);
}

.exitC {
  transform: translatey(100%);
  margin: -65px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exitC::before,
.exitC::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.exitC::after {
  transform: rotate(-45deg);
}

.closeB {
  transform: translatey(100%);
   margin: -65px auto 0;
  inset: 0 0 0 0;
  /*margin: auto auto 0;*/
  /*margin: 10px auto 0;*/
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
  cursor: pointer;
}

.closeB::before,
.closeB::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.closeB::after {
  transform: rotate(-45deg);
}


   <div class="modal-footer">
        <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
      </div>


   <div class="modal-footer">
          <button class="closeB exit">&times</button>
      </div>

1 Like
15

Question 1)

The buttons that are not in the flow on the bottom,

How do I get them to be even?

https://jsfiddle.net/1jhom5Lc/3/


I am trying to do this:

Would I do this: https://jsfiddle.net/udwjeoLk/2/

<div class="linkButton"></div>

        <div class="buttonContainerC">
          <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
          <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
          <a href="#" class="linkButton btn-primaryD btnD" target="_blank">some text </a>
          <div class="linkButton"></div>
        </div>

Now the area is empty.

or, would I do something different?

But then I would need to style it as the others, then make it transparent.

or it would still cause spacing issues.

16

Question 2) With the grid code it collapses to this:

@media (max-width: 536px) {
  .buttonContainerA {
    grid-template-columns: repeat(2, 172px);
  }
}

@media (max-width: 172px) {
  .buttonContainerA {
    grid-template-columns: repeat(1, 172px);
  }
}


.buttonContainerA {
  display: grid;
  grid-template-columns: repeat(3, 172px);
  /*align-content: center;
  justify-content: center;*/
  align-items: center;
  max-width: 536px;
  gap: 10px;
  }

Can media queries be used with flex to do the same or similar thing?

Flex Code: https://jsfiddle.net/mz031wdb/2/

or, media queries are not needed to do this?

@media (max-width: 569px) {
  .buttonContainerC {

  }
}

@media (max-width: 172px) {
  .buttonContainerC {

  }
}


.linkButtonC {
    flex-basis: 183px;
    /* width of each button */
    margin: 0;
    /* spacing between buttons */

    cursor: pointer;
}

.buttonContainerC {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    max-width: 569px;
    gap: 10px;
}

Grid and media queries are being used here and it’s not collapsing:

Why not?
https://jsfiddle.net/aejsg0zv/2/

.linkButtonB {
   /* flex-basis: 183px;*/
    /* width of each button */
    /*margin: 0;/*
    /* spacing between buttons */

    cursor: pointer;
}

@media (max-width: 569px) {
  .buttonContainerB {
    grid-template-columns: repeat(2, 183px);
  }
}

@media (max-width: 183px) {
  .buttonContainerB {
    grid-template-columns: repeat(1, 183px);
  }
}

.buttonContainerB {
  display: grid;
  grid-template-columns: repeat(3, 183px);
  /*align-content: center;
  justify-content: center;*/
  align-items: center;
  max-width: 569px;
  gap: 10px;
}

17

That seems to be what you have here?

The flex will automatically wrap to 2 columns (and then one column) when there is not enough room but the buttons will still stay at 183px wide. You would only need media queries if you wanted the 2 buttons to fill the width and then you;d need to change the flex-basis to 50% or similar.

18

Responding to your first question:

Can this be done without using an invisible div?

<div class="linkButton"></div>

An invisible div that takes up space.

I know, using grid, that isn’t needed.

this33

Flex without the invisible div.

jhjhjhjhj

19

What I mean using flex is:

Using grid:

it goes from this:

Straight to this:

Can that be done using media queries and flex?

20

What I mean using flex is:

Using grid:

it goes from this:

Straight to this:

Can that be done using media queries and flex?

With flex: https://jsfiddle.net/mz031wdb/2/

Can that space be removed when it goes from 3 to 2?

6lBE6ci

I added grid to this one: https://jsfiddle.net/aejsg0zv/2/

It is not going from 3 to 2 to 1.

I don’t know why.