Question

基本上我有两个链接。我想链接1打开一个弹出窗口（让我们说弹出窗口1），链接2打开一个单独的弹出窗口（弹出窗口2）。就像现在一样，两者都只打开Popup 2.这个代码究竟需要改变什么？

代码在这里可见： https://jsfiddle.net/mattwalker1092/xxgt4tm5/ 或者，或者，在下面：

body {
	background: #1f1f2e; }
	
ppopup {
    color: #000000;
	font-family: "cambria";
	font-size: 22px }	

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: scroll; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }

.modal-content {
    background-color: #dbd9d7;
	text-align: center;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
	height: 70%;
	overflow-x: hidden;
	overflow-y: scroll; }
	
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold; }
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer; }

button {
    background:none!important;
    border:none; 
    padding:0!important;
	 
	color: #cc9966;
	font-family: "Century Gothic";
	font-size: 16px;
	text-decoration: none;}
	
.txt:hover {
    text-decoration: underline; }

<!-- Trigger/Open The Modal -->
<center><button id="myBtnONE"><span class="txt" style="cursor:pointer">Link 1</span></button></center>

<!-- The Modal -->
<div id="myModalONE" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p><ppopup>
	This is my FIRST TEST
	</ppopup></p>
  </div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModalONE');

// Get the button that opens the modal
var btn = document.getElementById("myBtnONE");

var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block"; }
span.onclick = function() {
    modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none"; } }
</script>


<center><button id="myBtnTWO"><span class="txt" style="cursor:pointer">Link 2</span></button></center>

<!-- The Modal -->
<div id="myModalTWO" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p><ppopup>
		This is a SECOND TEST
	</ppopup></p>
  </div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModalTWO');

// Get the button that opens the modal
var btn = document.getElementById("myBtnTWO");

var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    modal.style.display = "block"; }
span.onclick = function() {
    modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none"; } }
</script>

Answer 1

见https://jsfiddle.net/nf6bcpdu/。只需使用一些onclick事件来绑定您想要发生的事情。

<center><button id="myBtnONE"><span class="txt" style="cursor:pointer" onclick="OpenModalOne();">Link 1</span></button></center>

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close"  onclick="CloseModalOne();">&times;</span>
    <p><ppopup>
    This is my FIRST TEST
    </ppopup></p>
  </div>
</div>

<script>

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

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

function CloseModalOne() {
    var modal = document.getElementById('myModalONE');
    modal.style.display = "none";
}

function CloseModalTwo() {
    var modal = document.getElementById('myModalTWO');
    modal.style.display = "none";
}

</script>script>

<center><button id="myBtnTWO"><span class="txt" style="cursor:pointer" onclick="OpenModalTwo();">Link 2</span></button></center>

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" onclick="CloseModalTwo();">&times;</span>
    <p><ppopup>
        This is a SECOND TEST
    </ppopup></p>
  </div>
</div>

创建两个打开不同弹出窗口的模态按钮

1 个答案: