How can I use multiple modals on my site? - javascript

Trying to figure out how to use multiple modals on my website.
I have one working fine but try to use a second triggering the same javascript action but it doesn't pop up the modal. I need a system for making multiple modals as my idea is to make each one have a popup box displaying dicord usernames.
I pasted my code below:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on 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";
}
}
.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 */
}
/* Modal Content/Box */
.modal-content {
background-color: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<li id="myBtn1"><a><i class="fa fa-"><center><img height="20px"
src="/images/icons/discord.png"></center></i></a></li>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text</p>
</div>
</div>

Detail(s)
You can easily achieve this via using querySelectorAll, this will return a HTMLCollection of DOM elements. You can then use the forEach function as stated below, personally I just find this approach slightly more readable than using a traditional for loop.
PS
A HTMLCollection is not the same as an Array, if you want to ever convert your HTMLCollection to an Array, you can do so via Array.from(HTMLCollection). There are other ways to convert Array-like objects to an Array, i.e. [].slice.call(HTMLCollection), you may wish to use the later approach if you wish to support legacy browsers or just browsers that do not support Array.from.
// Self invoked function.
(function() {
// List all of the buttons.
var btns = document.querySelectorAll("ul li a");
// List all of the modals.
var modals = document.querySelectorAll(".modal");
// The on click handler.
var onClickAction = function(index) {
// Get the modal by index.
var modal = modals[index];
if (modal != null) {
modal.style.display = "block";
// Now get the span.
var closeBtn = modal.querySelector(".close");
closeBtn.onclick = function() {
modal.style.display = "none";
};
// Re-assign the window event.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
};
};
// Loop over each button.
btns.forEach(function(btn, index) {
btn.onclick = function() {
onClickAction(index);
};
});
})();
.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 */
}
/* Modal Content/Box */
.modal-content {
background-color: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<ul>
<li id="myBtn1">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
<li id="myBtn2">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
</ul>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 1</p>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 2</p>
</div>
</div>

Related

URL is not opened in modal

I'm trying to make the URL content appear in the modal (let's assume it's www.google.it), only it doesn't open in the modal.
I tried to use window.location.href as shown in the code below, however this site opens in a new page and not in the modal.
Can anyone kindly help me?
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
window.location.href="www.google.com";
}
// 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";
}
}
.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: auto;
/* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
As I am understanding your question may need to use an iframe in your model to show or open a URL.
window.location.href="www.google.com"; will redirect your page to the address you mentioned so I comment this line.
You can assign www.google.com to iframe src.
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
//window.location.href="www.google.com";
}
// 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";
}
}
.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: auto;
/* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
<iframe src="https://www.w3schools.com" class="url" title="W3Schools Free Online Web Tutorials">
</iframe>
</div>
</div>

Creating a modal with yes/no commands for web

Right now, I have a card for people to add, edit, or delete a device, with subsequent FAS font-awesome icons. Basically, I want to know how to create a popup command or option for when someone clicks one of these icons. For example, if someone one were to click a "delete" symbol, a popup that would include text, yes, and no buttons. Where I am stuck is trying to make the modal close with the yes and no buttons, and how to submit information for the yes command.
Separately, I am trying to change the styling (border, background color) of the buttons and getting stuck.
Currently, an example of my code can be accessed w3schools.com--
https://www.w3schools.com/code/tryit.asp?filename=G77OAKK28TTH
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.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: auto;
/* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Would you like to delete this device?</p>
<button>Yes</button><button>No</button>
</div>
</div>
I added id's to your buttons and this code to close the modal when the button with id "yes-button" is clicked:
document.getElementById("yes-button").onclick = function() {
modal.style.display = "none";
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
// Close modal when button with id "yes-button" is clicked
document.getElementById("yes-button").onclick = function() {
modal.style.display = "none";
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.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: auto;
/* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Would you like to delete this device?</p>
<button id="yes-button">Yes</button><button id="no-button">No</button>
</div>
</div>

How to fix my popup that closes automatically after opening and refreshes my page? [duplicate]

This question already has answers here:
How to prevent default event handling in an onclick method?
(13 answers)
Closed 4 years ago.
I created a pop up in my HTML page but when I click my HTML element that launches the Popup, It appears for just second and it closes automatically and my page refreshes
Here's the detailed code that I'm using
HTML Code :
<a class="lv-footer" id="openPop" href="">Visualiser plus de détails</a>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
CSS code :
.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: auto; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
and JS code:
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("openPop");
// 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";
}
}
Can you tell me what's the problem ?
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("openPop");
// 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(event) {
event.preventDefault()
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";
}
}
.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: auto; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<a class="lv-footer" id="openPop" href="">Visualiser plus de détails</a>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
Add event.preventDefault() on button click. which is anchor. So it will prevent the functionality of anchor tag that is redirecting.

I cant get two HTML modals to show with CSS, JavaScript, and PHP

I am having trouble trying to get two different modals to show with two different buttons. On my actual website the buttons just show the incorrect modal but when I put it into an standalone HTML document we see the result is much different. One of the modals is showing on the screen before anyone hits a button and the second one shows with both button presses
Here is my standalone HTML Code
Any help is much appreciated, even a comment could help. I have about 3 hours into this problem ftr.
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.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: auto; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
</script>
</html>
</script>
</html>
So far what I see is that you had the class 'modal' written as 'modalL' on one of your modals. You've also got some other names done incorrectly - please check my revised example.
// Get the modal
var modalL = document.getElementById('myModalL');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementById("close");
var spanL = document.getElementById("closeL");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks the button, open the modal
btnL.onclick = function() {
modalL.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
spanL.onclick = function() {
modalL.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";
}
}
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.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: auto; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<html>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modal">
<div class="modal-content">
<span id="closeL" class="close">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
</script>
</html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.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: auto; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body onload="myFunction()">
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
function myFunction() {
document.getElementById("myModalL").style.display = 'none';
}
</script>
</html>
</script>
</html>

How can I change the inside of the modal pop up with the textbox on the main web page

I want to do something with modal popups but I don't have too much knowledge about modal popups and their codes.
So I want to change the inside of the modal popup with the textbox which is on the main web page. I'll write something to the textbox then when I click the button, inside of the modal popup should be changed. And also there it is a textbox inside of the modal popup with button when I write something to textbox and hit enter paragraph of main web page should be changed too.
I tried something like this:
HTML
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<input type="text" id="to" value="Something">
<br>
<button id="myBtn" onclick="myFunction()">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<br>
<span class="close">×</span>
<p id="demo">.</p>
</div>
</div>
CSS
/* The Modal (background) */
.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: auto; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JS
function myFunction(){
var x = document.getElementById("to").innerHTML;
document.getElementById("demo").innerHTML=x;
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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";
}
}
Do you need this kind of an implementation.
Please run the example to see it in action.
// Get the modal
var modal = document.getElementById('myModal');
//Modal open function
function openModal() {
modal.style.display = "block";
document.getElementById('demo').innerHTML = document.getElementById('to').value;
}
//Modal text update function
function udpateText() {
modal.style.display = "none";
document.getElementById('paragraph').innerHTML = document.getElementById('from').value;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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";
}
}
/* The Modal (background) */
.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: auto;
/* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<p id="paragraph"></p>
<!-- Trigger/Open The Modal -->
<input type="text" id="to" value="Something">
<br>
<button id="myBtn" onclick="openModal()">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<br>
<span class="close">×</span>
<p id="demo">.</p>
<input type="text" id="from" value="">
<br>
<button id="myModalBtn" onclick="udpateText()">Update Text</button>
</div>
</div>
here is an implementation using jquery ui modal.
this line puts the text input into the modal content. $('#content').text($('#myinput').val());
here is the fiddle. https://jsfiddle.net/8emj1ywp/1/

Categories