Turning linkButton into a modal button

HTML & CSS
41

Try adding this:

.buttonContainerC:after{
  content:"";
  flex-basis:183px;
}

You still have the issue of the vertical overlap on small heights in 2 columns as mentioned a while ago.

1 Like
42

Fixed: https://jsfiddle.net/q2j6rkmy/2/

That vertical overlap is there no matter what is done in the code.

43

Yes its because of the two different scroll containers. One scrolls and the other doesnā€™t.

It might have been possible using grid instead of absolute positioning and placing them both in the same grid cell but then that would probably make it difficult to manage. In grid you can specify that elements live in the same grid-area and then effectively sit on top of each other. However, I donā€™t know if the same issue would occur with the scroll. Iā€™m assuming not but it would mean starting from scratch again with a bare bones example to see if thereā€™s any difference. It may just end up the same.

44

The issue I had with the dummy button was the extra white space it added.

It added either either padding or margin that pushed the button down further than where it was originally.

When going from 2 to 1.

https://jsfiddle.net/bp9zd3mn/2/

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

.dummy{
background: blue;
  }

tsdfdsf

Where the red button was originally.

originallu

45

You donā€™t need the dummy html in my example as the space is filled with this rule.

.buttonContainerC:after{
  content:"";
  flex-basis:183px;
}

It will have zero height in a single column as there are no other flex items in the same row to make it stretch.

46

Hereā€™s an example using grid to overlay the panels instead of fixed positioning.

This solves the problem of misalignment at any screen size.

I also reduced the css by about 50% as you seem to have duplicated everything when the only difference as a few colors. It could be reduced much further by simply using common classes for both sections as they are practically the same and tidying up the rest of the css.

Of course I have no idea if this is your goal and as mentioned numerous times if you add or remove things then thatā€™s like moving the goalposts without telling the goalkeeper.

2 Likes
47

That is using both Grid and Flex, I just realized that now.

48

Not sure anything can be done about this:

How do you prevent the height from being extended?

.buttonContainerA::after{
  content:"";
  flex-basis:152px;
}

Added: https://jsfiddle.net/42Lowjt7/

rxtend

Removed:
cxvcxv

What am I using it for?

So the last button isnā€™t in the middle.

Like this:
fghfhfh

It changes it to this:
fgdgfdfg

When it goes to 1, the background gets extended towards the bottom.

sdfdfd

50

Try setting a zero height on the :after pseudo element. That should mean that when it wraps on the single column it has no height.

51

That did not work: https://jsfiddle.net/07yqj8fv/1/

.buttonContainerA::after {
  content: "";
  flex-basis: 152px;
  height: 0;
}
52

Yes, I just tested and realised that the space is coming from the gap property and not that element. the element has no height but it triggers the parent to think that something is there and adds the 10px gap property at the bottom.

I canā€™t see an easy solution other than using media queries to change things at the required widths.

53

If I wanted the background to resize to fit the new width when three columns become two and then one, now it just stays fixed with three columns.

Is there a way to do that here? https://jsfiddle.net/Lh2agocd/

image1

zzxc

54

Unfortunately thatā€™s probably impossible in Css unless you use media queries to control the width.

55

I tried to implement it here: https://jsfiddle.net/Lcmh9p2y/1/

The modals are no longer in the middle.

.outer-container {
  display: flex;
  min-height: 100vh;
  /*justify-content: center;
  flex-direction: column;*/
}

.outer-containerB {
  display: grid;
  grid-template-areas: "main";
}

.containerB.hide {
  display: none;
}

.containerB {
  display: grid;
  place-content: center;
}

.modal-contentA,
.modalA {
  grid-area: main;
  margin: auto;
}

.inner-modalA {
  position: relative;
  margin: auto;
}


.containerC {
  display: grid;
  place-content: center;
}

.modal-contentB,
.modalB {
  grid-area: main;
  margin: auto;
}

.inner-modalB {
  position: relative;
  margin: auto;
}

onsdfsf

ddgdg


<div class="outer-containerB ">
  <div class="containerB">
    <div class="modal-contentA">
      <div class="buttonContainerA">
        <button data-destination="#ba" class="playButtonA btn-primaryA btnA">Listening</button>
        <button data-destination="#bb" class="playButtonA btn-primaryA btnA">Live Performance</button>
        <button data-destination="#bc" class="playButtonA btn-primaryA btnA">On Loop</button>
        <button data-destination="#bd" class="playButtonA btn-primaryA btnA">Audio Visual</button>
        <button data-destination="#be" class="playButtonA btn-primaryA btnA">Lyric Video</button>
        <button data-destination="#bf" class="playButtonA btn-primaryA btnA">Music Video</button>
        <button data-destination="#bg" class="playButtonA btn-primaryA btnA">From The Vault</button>
        <button data-destination="#bh" class="playButtonA btn-primaryA btnA">Mystery Box</button>
        <button data-destination="#bi" class="playButtonA btn-primaryA btnA">Cover</button>
        <button data-destination="#bj" class="playButtonA btn-primaryA btnA">Remix</button>
        <button data-destination="#bk" class="playButtonA btn-primaryA btnA">Instrumental</button>
        <button data-destination="#bl" class="playButtonA btn-primaryA btnA">Extended Mix</button>
        <button data-destination="#bm" class="playButtonA btn-primaryA btnA">Duet</button>
        <button data-destination="#bn" class="playButtonA btn-primaryA btnA">Acoustic</button>
        <button data-destination="#bo" class="playButtonA btn-primaryA btnA">Rework</button>
      </div>
      <button class="exitB exit" type="button" title="Exit" aria-label="Close"></button>
    </div>
    <div id="ba" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonA"></div>
          </div>
          <div class="buttonA"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bb" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonB"></div>
          </div>
          <div class="buttonB"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bc" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonC"></div>
          </div>
          <div class="buttonC"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bd" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonD"></div>
          </div>
          <div class="buttonD"></div>
          <div class="curtainB"> </div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="be" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonE"></div>
          </div>
          <div class="buttonE">
          </div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bf" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonF"></div>
          </div>
          <div class="buttonF"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bg" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonG"></div>
          </div>
          <div class="buttonG"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bh" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonH"></div>
          </div>
          <div class="buttonH"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bi" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonI"></div>
          </div>
          <div class="buttonI"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bj" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonJ"></div>
          </div>
          <div class="buttonJ"></div>
          <div class="curtainB"> </div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bk" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonK"></div>
          </div>
          <div class="buttonK"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bl" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonL"></div>
          </div>
          <div class="buttonL"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bm" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonM"></div>
          </div>
          <div class="buttonM"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bn" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonN"></div>
          </div>
          <div class="buttonN"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
    <div id="bo" class="modalA">
      <div class="inner-modalA">
        <div class="ratio-keeper">
          <div class="wrapB">
            <div class="video buttonO"></div>
          </div>
          <div class="buttonO"></div>
          <div class="curtainB"></div>
        </div>
        <button class="closeA exit">&times</button>
      </div>
    </div>
  </div>


  <div class="containerC hide">
    <div class="modal-contentB">
      <div class="buttonContainerB">
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>
        <button class="linkButtonB btn-primaryC btnC">linkButton</button>

      </div>
      <div class="modal-footer">
        <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
      </div>
    </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>
          <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>
          <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>
          <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="modal-footer">
          <button class="closeB exit">&times</button>
        </div>
      </div>
    </div>
  </div>
 </div>
56

https://jsfiddle.net/kphmf3c5/1/

Double scroll bars, but all centered in the middle.

Which controls both inner and outer modal.

.outer-container {

   display: grid;
   place-content: center;
  grid-template-areas: "main";
   min-height: 100vh;
/*  justify-content: center;
  flex-direction: column;
   margin: auto;*/
}

/*.outer-containerB{

}*/

.containerB.hide {
  display: none;
}

/*.containerB {
  display: grid;
  place-content: center;
}*/


.modal-contentA,
.modalA {
  grid-area: main;
    margin: auto;
}

.inner-modalA {
   margin: auto;
}

yfgfg

57

Thatā€™s pretty pointless then :slight_smile: What was wrong with the grid method I gave you? You canā€™t have double scrollbars like that as it makes no sense.

There never was any problem with centering anyway and now that you have centred the orphan items thereā€™s no gap at the bottom to worry about.

.

1 Like
58

With this code, if I want to add back in, clicking on the background to exit out, what gets added in? https://jsfiddle.net/4owmgdkp/

(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();
}());

I figured it out.

I did it here: https://jsfiddle.net/xmdq14a2/1/

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