How to assign diffrent popup with same function with javascript?-CodePudding

so I have this program I am trying to type and I found different ways to write the code but the same popup screen comes how do I call the same function but show different headers when clicked? I have tried to use the same function with different classes called but IDK why everything disappears but I haven't coded javascript very much and still new to me. Please help me the way I am trying to am at is when Wedding button is clicked I want to show "you clicked wedding button" when the birthday is clicked "birthday button"..etc, problem is that the wedding functions is only showing how do I fix it?

/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");

function toggleModal() {
  modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal();
  }
}

wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

/* Popup screen for each modal when pressed 
   buttons when pressed background changes
   setup for when clicked*/

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}


/*center of page  with padding and borders*/

.modal-content {
  position: absolute;
  top: 359px;
  left: 624px;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 34%;
  border-radius: 0.5rem;
  height: 122%;
}


/*close button layout with hover background*/

.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.close-button:hover {
  background-color: darkgray;
}


/*style of modal when its open */

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<div id="occasion">
  <button id="occassion_layout" >Wedding</button>
  <button id="occassion_layout" >Birthday</button>
  <button id="occassion_layout" >Holiday</button>
</div>


<div id="Wed_fill">
  <span >&times;</span>

  <!--when the wedding button is pusehed what it will show show div boderline-->
  <div >
    <div >
      <span >&times;</span>

      <p>Wedding button clicked</p>

    </div>

  </div>

</div>

<div >
  <div >
    <span >&times;</span>

    <!--form for birthday-->
    <div >
      <div >
        <p>HAPPY BIRTHDAY button clicked</p>

      </div>

    </div>

  </div>

</div>

<div >
  <div >
    <span >&times;</span>

    <!--form for birthday-->
    <div >
      <div >
        <p>Party button clicked</p>

      </div>

    </div>

  </div>
</div>

CodePudding user response：

Add an attribute to the button that relates it to the corresponding modal, so you can toggle that modal.

/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");

function closeModal() {
  document.querySelectorAll(".modal").forEach(el => el.classList.remove("show-modal"));
}

function toggleModal(e) {
  let modal = document.getElementById(e.target.dataset.rel);
  if (modal) {
    document.querySelectorAll(".modal").forEach(el => {
      if (el == modal) {

        el.classList.toggle("show-modal");
      } else {
        el.classList.remove("show-modal");
      }
    });
  }
}

function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal(event);
  }
}


wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModal);
window.addEventListener("click", windowOnClick);

/* Popup screen for each modal when pressed 
   buttons when pressed background changes
   setup for when clicked*/

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}


/*center of page  with padding and borders*/

.modal-content {
  position: absolute;
  top: 359px;
  left: 624px;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 34%;
  border-radius: 0.5rem;
  height: 122%;
}


/*close button layout with hover background*/

.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.close-button:hover {
  background-color: darkgray;
}


/*style of modal when its open */

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<div id="occasion">
  <button id="occassion_layout"  data-rel="wedding_modal">Wedding</button>
  <button id="occassion_layout"  data-rel="birthday_modal">Birthday</button>
  <button id="occassion_layout"  data-rel="holiday_modal">Holiday</button>
</div>


<div id="Wed_fill">
  <span >&times;</span>

  <!--when the wedding button is pusehed what it will show show div boderline-->
  <div id="wedding_modal" >
    <div >
      <span >&times;</span>

      <p>Wedding button clicked</p>

    </div>

  </div>

</div>

<div id="birthday_modal" >
  <div >
    <span >&times;</span>

    <!--form for birthday-->
    <div >
      <div >
        <p>HAPPY BIRTHDAY button clicked</p>

      </div>

    </div>

  </div>

</div>

<div id="party_modal" >
  <div >
    <span >&times;</span>

    <!--form for birthday-->
    <div >
      <div >
        <p>Party button clicked</p>

      </div>

    </div>

  </div>
</div>

This code isn't fully working, but I have to leave now.

CodePudding user response：

I took liberty to format a bit using flex. I suggest a "toggle" for display using data attribute so you only have to "change" it not add/remove it - and you can use that in the CSS (I used "show" and "hide" values. To open a modal, I used a "target" data as a class and selected by that - it could be a number of values/combinations.

I set up a "close" event for the X and then triggered them all to close when a button was clicked so if one is already open we only have one at a time open.

I did away with all the "position" css and used flex instead of px this way and that etc. which is hard to maintain from my experience.

Something you can build upon I think.

const modals = document.querySelectorAll(".modal");
const actionButtons = document.querySelectorAll(".modal-activator");
const closeButtons = document.querySelectorAll(".close-button");

/* not used but could trigger the closeEvent etc. */
function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal();
  }
}
// create close event 
const closeEvent = new Event('close-modal');
// Listen for the event.
closeButtons.forEach(btn => btn.addEventListener('close-modal', function(event) {
  let myModal = event.target.closest(".modal");
  myModal.dataset.showToggle = "hide";
}, false));

actionButtons.forEach(btn => btn.addEventListener('click', event => {
  // console.log(event.target.getAttribute("data-target-modal"));
  const dataAttrMap = event.target.dataset;
  const modalSelector = ".modal."   dataAttrMap.targetModal;
  // console.log(modalSelector);
  closeAllModals(closeButtons);
  const modalTarget = document.querySelector(modalSelector);
  modalTarget.dataset.showToggle = "show";
}));
closeButtons.forEach(btn => btn.addEventListener('click', function(event) {
  let myModal = event.target.closest(".modal");
  myModal.dataset.showToggle = "hide";
}, false));

function closeAllModals(buttons) {
  buttons.forEach(btn => btn.dispatchEvent(closeEvent));
}

.contaner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: start;
}

.occasion.contaner {
  flex-direction: row;
  column-gap: 0.5em;
  align-self: flex-start;
  margin-bottom: 1rem;
}

.modal {
  display: flex;
  align-items: flex-start;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.modal-content {
  border-radius: 0.5rem;
  background-color: white;
  padding: 1rem 1.5rem;
  margin-top: 1rem;
  margin-left: 0.5rem;
  margin-bottom: 1rem;
}

.close-button {
  align-self: flex-start;
  margin-left: auto;
  width: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
  text-align: center;
  border-radius: 0.25rem;
  background-color: lightgray;
}

.close-button:hover {
  background-color: darkgray;
}


/* not used
.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
*/

.modal[data-show-toggle="show"] {
  opacity: 1;
  display: flex;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.modal[data-show-toggle="hide"] {
  display: none;
}

<div >
  <div id="occasion" >
    <button  data-target-modal="wedding" type="button">Wedding</button>
    <button  data-target-modal="birthday" type="button">Birthday</button>
    <button  data-target-modal="holiday" type="button">Holiday</button>
  </div>
  <div >
    <div  data-show-toggle="hide">
      <div >
        <p>Wedding button clicked</p>
      </div>
      <span >&times;</span>
    </div>
    <div  data-show-toggle="hide">
      <div >
        <div >
          <div >
            <p>HAPPY BIRTHDAY button clicked</p>
          </div>
        </div>
      </div>
      <span >&times;</span>
    </div>
    <div  data-show-toggle="hide">
      <div >
        <div >
          <div >
            <p>Party button clicked</p>
          </div>
        </div>
      </div>
      <span >&times;</span>
    </div>
  </div>
</div>