Open source modal box / JavaScript Modification / Closing on-click outside modal

Question

I'm trying to use an open-source popout on my website. I would like to add a simple fade-in/fade-out effect, and also allow the popout to be closed when clicked outside the box. Below is the javascript:

/*
 * SimpleModal Basic Modal Dialog
 * http://simplemodal.com
 *
 * Copyright (c) 2013 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 */

jQuery(function ($) {

// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();

    return false;
 });
});

There is an answer on another post Close a div by clicking outside that provides a short javascript solution. I attempted to modify this code to fit mine, but I was not sure how to properly call the div's from the css.

Below is the CSS:

 /*
  * SimpleModal Basic Modal Dialog
  * http://simplemodal.com
  *
  * Copyright (c) 2013 Eric Martin - http://ericmmartin.com
  *
  * Licensed under the MIT license:
  *   http://www.opensource.org/licenses/mit-license.php
  */

#basic-modal-content {
   display: none;
}

/* Overlay */

#simplemodal-overlay {
   background-color: #000;
}

/* Container */

#simplemodal-container {
   height: 360px;
   width: 600px;
   color: #bbb;
   background-color: #333;
   border: 4px solid #444;
   padding: 12px;
}

  #simplemodal-container .simplemodal-data {
  padding: 8px;
}

  #simplemodal-container code {
  background: #141414;
  border-left: 3px solid #65B43D;
  color: #bbb;
  display: block;
  font-size: 12px;
  margin-bottom: 12px;
  padding: 4px 6px 6px;
}

 #simplemodal-container a {
  color: #ddd;
}

 #simplemodal-container a.modalCloseImg {
  background: url(../img/basic/x.png) no-repeat;
  width: 25px;
  height: 29px;
  display: inline;
  z-index: 3200;
  position: absolute;
  top: -15px;
  right: -16px;
  cursor: pointer;
 }

 #simplemodal-container h3 {
  color: #84b8d9;
}

The button I am using is listed below : CSS/HTML

  .button {
     display: inline-block;
     padding: 10px 20px;
     margin: 10px 0;
     position: center;
     color: #ecf0f1;
  }

  /* BUTTON 8 */

  #button-8 {
     background-color: #34495e;
     overflow: hidden;
     -webkit-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
  }

  #button-8:hover {
     -webkit-box-shadow: 0px 0px 15px #34495e;
     box-shadow: 0px 0px 15px #34495e;
  }

And the HTML (clicking on button to open Modal)

  <a href='#' class='basic'>
       <div class="button" id="button-8">Click Me</div>
  </a>

You should try using SweetAlert (sweetalert.js.org) it's more easier to use — Sheshank S., Jun 17 '18 at 02:31

score 0 · Answer 1 · edited Jun 17 '18 at 03:24

0

To make a fade in fade out effect you use jQuery fadeIn(), fadeOut(), method. The div to click outside that closes the modal could be a backdrop and you set its onclick event

edited Jun 17 '18 at 03:24

pushkin

9,575
15
51
95

answered Jun 17 '18 at 00:53

calebpitan

58
8

score 0 · Answer 2 · answered Jun 17 '18 at 01:25

0

$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').fadeIn(300);
    return false; 
}); 

$(".backdrop").click(function() {
    $("#basic-modal-content").fadeOut(300);
});

answered Jun 17 '18 at 01:25

calebpitan

58
8

Thanks @longman. Would I just replace all of the content within `jQuery (function($){ ` with the code above? It doesn't seem to be working properly (the modal is not closing when clicking outside the box) – Jun 17 '18 at 01:56
It looks like now it is fading in, but the popup is no longer appearing. The contents are simply fading into the page – Jun 17 '18 at 02:03

score 0 · Answer 3 · answered Jun 17 '18 at 01:31

Then the css for the backdrop

.backdrop {
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2; /* If the body element has z-index: 1, the modal has z-index: 3 or above for the backdrop to be behind it. */
}

calebpitan · Answer 4 · 2018-06-17T02:26:20.153

0

Your syntax seems wrong. You have to remove jQuery and replace the whole thing with:

!function($) {
    // the code
    $('#btn-show-modal').click(function (e) { 
        $('#basic-modal-content').fadeIn(300);
        return false; 
    });
    $(".backdrop").click(function() { 
        $("#basic-modal-content").fadeOut(300); 
    });
})(window.jQuery)

The HTML:

<button id="btn-show-modal">Show Modal</button>
<div id="basic-modal-content">
    <div class="backdrop">
        <div id="basic-modal">
            Some content
        </div>
    </div>
</div>

edited Jun 17 '18 at 02:26

answered Jun 17 '18 at 02:21

calebpitan

58
8

Thanks for the assistance @Longman, it still doesn't seem to be working. I am thinking it has to do with my div id's not being correct. I edited the question to add the button CSS/html that I am using so you can see the exact div tags – Jun 17 '18 at 15:50

Open source modal box / JavaScript Modification / Closing on-click outside modal

4 Answers4