I am making an app using React framework.
So the problem I have here is that I want to execute this JS code in React. It is basically supposed to dynamically show and hide the <div>. Here is the code in the <script> tag which I want to run using React:
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
</script>
And here is the css -
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;
}
And HTML -
<h2>Modal Example</h2>
<!-- 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>
I saw in many tutorials that the componentDidMount helps. But it is not working. Also, I find that componentDidMount is quite complicated. So is there an alternative way to run this JS code in React?
Ok, this should get You started. Your plain html/js transforms approximately to this. (css left as is)
class MyModalApp extends React.Component {
constructor(props) {
super(props);
this.state = {showModal: false};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({showModal: true});
}
closeModal() {
this.setState({showModal: false});
}
render() {
const style= this.state.showModal ? {display: "block"} : {display: "none"};
return (
<div>
<h2>Modal Example</h2>
{/* <!-- Trigger/Open The Modal --> */}
<button id="myBtn" onClick={() => this.openModal()}>Open Modal</button>
{/* <!-- The Modal --> */}
<div id="myModal" class="modal" style={style}>
{/* <!-- Modal content --> */}
<div class="modal-content">
<span class="close" onClick={() => this.closeModal()}>×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<MyModalApp />,
document.getElementById('root')
);
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Related
I need to put several modals for one of my pages.
When the user clicks the button, the modal must be opened and a video is displayed in it.
This code is for placing only one modal on one page.
But I want several modals to work on one page.
And each modal will display its own video.
In this code, how can I create a loop?
Without the use of attributes and IDs.
Please help me how to do this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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 */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// 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";
}
}
</script>
</body>
</html>
Use importing and exporting in javascript... If use are woking on larger project then you have to use react in it is simple...:)
I am having a hard time understanding why this code does not close the modal. I can open just fine, and when clsoing, i can catch the console log but the rest of the code does not run. I get no error in console and feel as if I could just be overlooking something very small. Any help is much appreciated!
<style>.corporate-about-us .section h2 { border-bottom: 1px solid #ddd; } .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: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 70%; } /* 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; }</style>
<span class="sub-heading" id="dailyq1btn" onclick="openModal('dailyq1')">Daily Question 1</button>
<!-- The Modal -->
<div id="dailyq1" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('dailyq1')">×</span>
<div class="faq-info">
<h2 class="faq-question sub-heading">Place Holder Title</h2>
<p>Place Holder Body</p>
</div>
</div>
</div>
<script>
function openModal(questionId) {
let modal = document.getElementById(questionId);
modal.style.display = "block";
}
function closeModal(questionId) {
console.log(questionId)
let modal = document.getElementById(questionId);
modal.style.display = "none";
}
</script>
It works fine if you fix the button DOM, you're using a <span></button>
function openModal(questionId) {
let modal = document.getElementById(questionId);
modal.style.display = "block";
}
function closeModal(questionId) {
console.log(questionId)
let modal = document.getElementById(questionId);
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: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* 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;
}
<button class="sub-heading" id="dailyq1btn" onclick="openModal('dailyq1')">Daily Question 1</button>
<!-- The Modal -->
<div id="dailyq1" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('dailyq1')">×</span>
<div class="faq-info">
<h2 class="faq-question sub-heading">Place Holder Title</h2>
<p>Place Holder Body</p>
</div>
</div>
</div>
I have created a simple modal dialog box as shown in the code below, which I will use to add help at certain points of a web form.
I would like to add a sliding animation effect that causes the dialog to slide into the screen when the modal is opening, and slide back out when the modal is closed:
I can't find a solution for what I want to achieve. My modal code currently looks like this:
function openModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.display = "block";
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function closeModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.display = "none";
}
<style>
body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
.modal-content { margin: auto; padding: 20px; width: 80%; }
.close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>
<div id="myModal1" class="modal modal_move">
<div class="modal-content">
<button id="cModal" class="close" onclick="closeModal('myModal1')">×</button>
<p>Some text in the Modal...</p>
</div>
</div>
One approach might be to use the CSS3 transition and transform rules to achieve the required slide in/out animation effect for your modal.
One approach would be to add CSS rules to modal to define default transition and transform behavior, along with an open modifier class that defines the transform of the modal when it's visible:
/* Updated CSS with open selector */
.modal.open {
transform: translateX(0px);
}
.modal {
/* Update CSS with transition and transform rules */
transition: transform 1s linear;
transform: translateX(-100%);
}
Next, you would replace the inline style changes of the display rule, with logic to toggle the open class on your modal element like so:
// Add open class to toggle "open" mode
modal.classList.add('open');
// Remove open class to "hide" modal
modal.classList.remove('open');
These two idea can be combined with you existing code as follows:
function openModal(mod_name) {
var modal = document.getElementById(mod_name);
// Add open class to make visible and trigger animation
modal.classList.add('open');
}
function closeModal(mod_name) {
var modal = document.getElementById(mod_name);
// Remove open class to hide and trigger animation
modal.classList.remove('open');
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: red;
}
/* Updated CSS with open selector */
.modal.open {
transform: translateX(0px);
}
.modal {
/* Update CSS with transition and transform rules */
transition: transform 1s linear;
transform: translateX(-100%);
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
margin: auto;
padding: 20px;
width: 80%;
}
.close {
color: #323232;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #424242;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>
<div id="myModal1" class="modal modal_move">
<div class="modal-content">
<button id="cModal" class="close" onclick="closeModal('myModal1')">×</button>
<p>Some text in the Modal...</p>
</div>
</div>
You can use translate transform for this:
I changed your code like this: https://jsbin.com/qecajijuni/2/edit?html,js,output
<style>
body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
.modal { transition: 1s transform;transform:translate(500px); position:absolute; display: block; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
.modal-content { margin: auto; padding: 20px; width: 80%; }
.close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>
<div id="myModal1" class="modal modal_move">
<div class="modal-content">
<button id="cModal" class="close" onclick="closeModal('myModal1')">×</button>
<p>Some text in the Modal...</p>
</div>
</div>
function openModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.transform = "translate(0)";
window.onclick = function(event) {
if (event.target == modal) {
modal.style.transform = "translate(500px)";
}
}
}
function closeModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.transform = "translate(500px)";
}
I have a modal window(popup) that does not fit on the screen height. It opens by pressing a button. The button may be in different part of webpage. Is there a solution to the modal window opened at the top of the screen(for example top: 100px) by pressing a button?
When I use position fixed, the only way to make scrollY on modal window, but it is not the way I want.
<!DOCTYPE html>
<html>
<head>
<style>
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// 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";
}
}
</script>
</body>
</html>
<change location of box>
Hey I am trying to bring this modal infront of the other elements on the page.
I already tried z-index: -1.
I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* 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 */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</p>
</div>
</div>
<script>
// 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";
}
}
{
document.getElementById("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>
Try this - comments amended to show what I have changed
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place front is invalid - may break your css so removed */
padding-top: 100px; /* Location of the box - don't know what this does? If it is to move your modal down by 100px, then just change top below to 100px and remove this*/
left: 0;
right:0; /* Full width (left and right 0) */
top: 0;
bottom: 0; /* Full height top and bottom 0 */
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 */
z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}
You also have a missing end bracket from your .close:hover and focus and you seem to have a nested style within div.background - unless you are using a css pre-processor, then this is invalid css