score:0
well usually the option of modal for visibility is managed in state as boolean type.
you have to change the value of visibility as true(which is open) or false(and close), if there is no function that make visibility as false then you can't close the modal.
which mean is you need to use 'function' to change the 'value of visibility' that where in 'state' to control the modal view.
in react way.
view =( open modal )==> action === ( visibility) ==> state ===( change the value)===> view
and also your question is very abstractive.
anyway i hope that my answer can help you.
score:2
here is a modern, pure es6 implementation of a modal window.
i also included some simple open/close hooks.
class modalwindow {
constructor(options) {
this.opts = object.assign({}, modalwindow._defaultoptions, options)
this.modal = document.queryselector(this.opts.selector)
this.initialize()
this.addeventhandlers()
this.afterrender()
}
initialize() {
if (this.opts.headertext) {
this.query('.md-dialog-header-text').textcontent = this.opts.headertext
}
if (this.opts.htmlcontent) {
this.query('.md-dialog-content').innerhtml = this.opts.htmlcontent
} else if (this.opts.textcontent) {
this.query('.md-dialog-content').textcontent = this.opts.textcontent
}
if (this.opts.theme) {
this.modal.classlist.add(`md-theme-${this.opts.theme}`)
}
}
addeventhandlers() {
this.query('.md-dialog-header-close-btn').addeventlistener('click', (e) => {
this.setvisible(false)
})
if (this.opts.mode !== 'modal') {
this.modal.addeventlistener('click', (e) => {
if (e.target === this.modal) {
this.setvisible(false)
}
})
}
}
afterrender() {
if (this.opts.show === true) {
this.setvisible(true);
}
}
setvisible(visible) {
this.modal.classlist.toggle('md-dialog-visible', visible)
if (visible) {
this.onopen() // class method override or callback (below)
if (typeof this.opts.onopen === 'function') {
this.opts.onopen(this.modal)
}
} else {
this.onclose() // class method override or callback (below)
if (typeof this.opts.onclose === 'function') {
this.opts.onclose(this.modal)
}
}
}
query(childselector) {
return this.modal.queryselector(childselector)
}
// example hooks
onopen() { }
onclose() { }
}
modalwindow._defaultoptions = {
selector: '.md-dialog',
show: false,
mode: 'modal'
}
class mycustommodalwindow extends modalwindow {
constructor(options) {
super(options)
}
onopen() {
console.log('opened!') // or you can use options.onopen
}
onclose() {
console.log('closed!') // or you can use options.onclose
}
}
let modal = new mycustommodalwindow({
show: true, // show the modal on creation
mode: null, // disable modal mode, allow click outside to close
headertext: 'hello world!',
htmlcontent: '<p>this is an example of the popup.</p>',
theme : 'dark',
onclose : (self) => {
console.log('another close hook...')
}
})
document.queryselector('#show-modal-btn').addeventlistener('click', (e) => {
modal.setvisible(true)
})
.md-dialog {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.md-dialog.md-dialog-visible {
display: block;
}
.md-dialog .md-dialog-window {
border: 1px solid #888;
background-color: #fefefe;
width: 80%;
margin: 10% auto;
}
.md-dialog .md-dialog-header {
position: relative;
width: calc(100% - 0.5em);
height: 1.667em;
font-weight: bold;
font-size: 1.33em;
line-height: 1.667em;
padding: 0.125em 0.25em;
background-color: #ddd;
}
.md-dialog .md-dialog-header-close-btn {
position: absolute;
font-weight: bold;
top: 0;
right: 0;
width: 0.875em;
height: 0.875em;
line-height: 1em;
padding: 0.1em;
color: #7f7f7f;
}
.md-dialog .md-dialog-header-close-btn:before {
content: '\2715';
}
.md-dialog .md-dialog-header-close-btn:hover,
.md-dialog .md-dialog-header-close-btn:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
background: #f00;
}
.md-dialog .md-dialog-content {
width: 100%;
padding: 0.25em;
}
/** example dark theme */
.md-theme-dark.md-dialog {
background-color: rgba(0, 0, 0, 0.8);
}
.md-theme-dark.md-dialog .md-dialog-window {
border: 1px solid #666;
background-color: #111;
color: #eee;
}
.md-theme-dark.md-dialog .md-dialog-header {
background-color: #000;
}
.md-theme-dark.md-dialog .md-dialog-header-close-btn {}
.md-theme-dark.md-dialog .md-dialog-header-close-btn:hover,
.md-theme-dark.md-dialog .md-dialog-header-close-btn:focus {}
.md-theme-dark.md-dialog .md-dialog-content {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<button id="show-modal-btn">open modal</button>
<div id="mymodal" class="md-dialog">
<div class="md-dialog-window">
<div class="md-dialog-header">
<div class="md-dialog-header-close-btn"></div>
<div class="md-dialog-header-text">$header</div>
</div>
<div class="md-dialog-content">$content</div>
</div>
</div>
score:2
in bootstrap 5 (beta 1) this gets as simple as this:
your button (having onclick function call):
<button type="button" class="btn btn-primary" onclick='openmodal()'>
launch demo modal</button>
your modal:
<div class="modal fade" id="mymodal" tabindex="-1"
aria-labelledby="examplemodallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="examplemodallabel">modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">close</button>
<button type="button" class="btn btn-primary">save changes</button>
</div>
</div>
</div>
</div>
and finally, the "pure" java script function:
<script type="text/javascript">
function openmodal() {
var mymodal = new bootstrap.modal(document.getelementbyid('mymodal'), { keyboard: false });
mymodal.show();
}
</script>
score:9
are you searching for this?
// 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";
}
}
/* 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>your contents</p>
</div>
</div>
Source: stackoverflow.com
Related Query
- Opening modal from function in pure javascript
- Call external Javascript function from react components
- Calling Dispatch function from a blank javascript file
- Call external Javascript function from react typescript components
- Call react component's function from external JavaScript function
- Close modal A after opening modal B from modal A in reactjs with react-bootstrap
- Call javascript function from ReactJS
- Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed
- Wait for a Javascript function to finish executing and fetch the response from it
- React opening react-bootstrap modal in content component from sidebar
- How to make a function as pure function using javascript and react?
- Call normal javascript function from another document in a react component function
- Call react component function from javascript
- Catching errors from one function inside another JavaScript React
- Return multiple react components from a javascript function
- Assigned returned value from function chain into a variable in javascript
- How Use images from javascript array in react using filter and map function
- Call Javascript function in .js file with React from HTML file
- JavaScript React: Issues with passing prop from a function in a child component to a function in the parent
- React: Trigger a function from React Modal component
- Call javascript function from react in txt/javascript
- Calling modular custom javascript module function twice from React component. Why is it being called twice? Scenario shown below:
- Opening modal from click of a different button from parent component
- React JS Modal opening from Navbar
- Is there any way to import JavaScript function to React component outside from src folder
- How to use a javascript function from a React js component
- How to display show more only when text overflows from a div using pure css javascript in reactjs
- Call Javascript function from react components
- How can I pass the index from javascript map function to the onclick function?
- Update array item value from function results - javascript
More Query from same tag
- Is it possible to pass a component as a prop within an object using the spread operator?
- I'm trying to scroll to top of each page using react app
- React render component asynchronously, after data is fetched
- Exporting Promise API calls for reusing
- How take input values to GET API response?
- How to prevent double rerender when I use props, useState and useEffect?
- typescript how to derive type from dynamic array?
- React Subscription plan connected to PayPal
- React State not updating properly
- How to get the values of the inner array in react axios
- Property x does not exist on type react
- React Router: Add entry to history without changing route
- react-select typescript issue - Generic type 'ValueType' requires 2 type argument(s).ts(2314)
- React router dom problen
- Why do I get 'Cannot read property 'props' of undefined'?
- My firebase query call isn't getting my document even though it exists
- So i created a Callback function in React and i am invoking it but it keeps in showing the error that its undefined
- Flipping a card, CSS animation for web app
- Snap grid, drag and drop with react-konva
- react-slick: Import CSS from slick-carousel fails
- Next.js use localstorage problem with SSR
- Unzipping files in REACT and then rezipping it again
- how to display name on multi series pie chart in chartjs
- How manage a json array of attributes for display in ReactJS
- 'action' is not defined in Redux
- React rendering variable with html characters escaped
- React-redux Hooks and function component logic
- React build run on server using pm2 in windows
- Rendering <option value="foo" selected> on the server
- why my condition don't change the state in react js on submit?