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">&times;</span>
    <p>your contents</p>
  </div>

</div>


Related Query

More Query from same tag