javascript - 如何添加多个模态

// Get the modal var modal = document.getElementById("subscription"); // Get the button that opens the modal var btn = document.getElementById("subscribe"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // Get the modal var modal = document.getElementById("shout"); // Get the button that opens the modal var btn = document.getElementById("mouthoff"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

button.subscribe { background: transparent !important; border: none; display: inline-block; zoom: 1; *display: inline; vertical-align: top; float: none !important; margin-top: 7px; text-transform: uppercase; } button.subscribe:focus { outline: none; } /* The Modal (background) */ .subscribe-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s } /* Modal Content */ .subscribe-content { position: fixed; bottom: 0; background-color: #fefefe; width: 100%; -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s } /* The Close Button */ .close { color: #000; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #ff0000; text-decoration: none; cursor: pointer; } .subscribe-header { padding: 2px 16px; background-color: #000; color: white; } .subscribe-body { padding: 2px 16px; } .subscribe-body h2 { margin-top: 15px; text-transform: uppercase; font-size: 15px; font-weight: 400; padding-bottom: 2px; font-family: DINNext-Bld, sans-serif; margin: 20px 20px 20px; line-height: 90%; text-align: center; letter-spacing: -.03em; } .subscribe-body p { margin-left: 550px; margin-right: 550px; font-size: 15px; padding-bottom: 2px; font-family: DINNext-Bld, sans-serif; text-align: justify; } .subscribe-body a.manage { margin-right: 1700px; padding: 6px 20px 3px; text-decoration: none; border: 1px solid #000; position: relative; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-size: 1em; display: inline-block; zoom: 1; *display: inline; vertical-align: top; float: none !important; color: #000; font-family: DINNext-Med, sans-serif; margin-bottom: 25px; } .subscribe-body a.manage:hover { background: #000; color: #fff } .subscribe-footer { padding: 2px 16px; background-color: #5cb85c; color: white; } /* Add Animation */ @-webkit-keyframes slideIn { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } } @keyframes slideIn { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } button.mouthoff { background: transparent !important; border: none; display: inline-block; zoom: 1; *display: inline; vertical-align: top; float: none !important; margin-top: 7px; text-transform: uppercase; } button.mouthoff:focus { outline: none; } /* The Modal (background) */ .mouthoff-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s } /* Modal Content */ .mouthoff-content { position: fixed; bottom: 0; background-color: #fefefe; width: 100%; -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s } .mouthoff-header { padding: 2px 16px; background-color: #000; color: white; } .mouthoff-body { padding: 2px 16px; } .mouthoff-body h2 { margin-top: 15px; text-transform: uppercase; font-size: 15px; font-weight: 400; padding-bottom: 2px; font-family: DINNext-Bld, sans-serif; margin: 20px 20px 20px; line-height: 90%; text-align: center; letter-spacing: -.03em; } .mouthoff-body p { margin-left: 550px; margin-right: 550px; font-size: 15px; padding-bottom: 2px; font-family: DINNext-Bld, sans-serif; text-align: justify; } .mouthoff-body a.manage { margin-right: 1700px; padding: 6px 20px 3px; text-decoration: none; border: 1px solid #000; position: relative; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-size: 1em; display: inline-block; zoom: 1; *display: inline; vertical-align: top; float: none !important; color: #000; font-family: DINNext-Med, sans-serif; margin-bottom: 25px; } .mouthoff-body a.manage:hover { background: #000; color: #fff } .mouthoff-footer { padding: 2px 16px; background-color: #5cb85c; color: white; } /* Add Animation */ @-webkit-keyframes slideIn { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } } @keyframes slideIn { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

<button class="subscribe" id="subscribe">Subscribe</button>  <div id="subscription" class="subscribe-modal">  <div class="subscribe-content"> <div class="subscribe-header"> <span class="close"></span> </div> <div class="subscribe-body"> <h2>Subscribe to the Galaxy Mailing List</h2> <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all the updates.</p> <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a> </div> </div> </div>  <button class="mouthoff" id="mouthoff">mouthoff</button>  <div id="shout" class="mouthoff-modal">  <div class="mouthoff-content"> <div class="mouthoff-header"> <span class="close"></span> </div> <div class="mouthoff-body"> <h2>Mouthoff - Tell Us What's On Your Mind</h2> <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all the updates.</p> <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a> </div> </div> </div>

// Get the modal var modal = document.getElementById("subscription"); // Get the button that opens the modal var btn = document.getElementById("subscribe"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // Get the modal var shoutModal = document.getElementById("shout"); // Get the button that opens the modal var mouthoffButton = document.getElementById("mouthoff"); // Get the <span> element that closes the modal var spanClose = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks the button, open the modal mouthoffButton.onclick = function() { shoutModal.style.display = "block"; } // When the user clicks on <span> (x), close the modal spanClose.onclick = function() { shoutModal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal || event.target == shoutModal) { shoutModal.style.display = "none"; modal.style.display = "none"; } }