मैं इस पॉपअप को मेनू में विभिन्न बटनों से खोलने की कोशिश कर रहा हूं, हालांकि, पॉपअप सामग्री वही रहेगी।

धन्यवाद, बैनिक

function OpenModalT() {
  var modal = document.getElementById('myModalT');
  modal.style.display = "block";
}

function CloseModalT() {
  var modal = document.getElementById('myModalT');
  modal.style.display = "none";
}
<li>
  <a href="#" onclick="OpenModalT();">Button 1</a>

  <!-- The Modal -->
  <div id="myModalT" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close" onclick="CloseModalT();">&times;</span>
      <p>
        <ppopup>
          <br>
          <br>
          <strong>Dummy text Dummy text Dummy Text <br><br> Kind Regards
          </strong>
        </ppopup>
      </p>
    </div>
  </div>
</li>

<li>
  <a href="#" onclick="OpenModalT();">Button 2</a>
</li>
4
Banick 17 अप्रैल 2021, 23:24

1 उत्तर

आपको display: none से शुरुआत करनी होगी।

var modal = document.getElementById('myModalT');

function OpenModalT() {
  modal.style.display = "block";
}

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

function ModalFunction() {
  if (modal.style.display === "none") {
    modal.style.display = "block";
  } else {
    modal.style.display = "none";
  }
}
/*Add this:*/

#myModalT {
  display: none;
}
<li>
  <a href="#" onclick="ModalFunction();">Button 1</a>

  <!-- The Modal -->
  <div id="myModalT" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <p>
        <ppopup>
          <br>
          <br>
          <strong>Dummy text Dummy text Dummy Text <br><br> Kind Regards
          </strong>
          <span class="close" onclick="ModalFunction();">&times;</span>
        </ppopup>
      </p>
    </div>
  </div>
</li>

<li>
  <a href="#" onclick="ModalFunction();">Button 2</a>
</li>

कुछ सुविधाएं जोड़ी गईं:

  1. आप बंद करने के लिए फिर से क्लिक कर सकते हैं
  2. जावास्क्रिप्ट में सहेजा गया स्थान
1
Green 17 अप्रैल 2021, 21:39