打开源码模式框/ JavaScript修改/关闭-单击外部模式

Question

我正试着在我的网站上使用一个开源的弹出窗口。我想添加一个简单的淡入/淡出效果，也允许在框外单击时关闭弹出。下面是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;
 });
});

在另一篇文章Close a div by clicking outside上有一个答案，它提供了一个简短的javascript解决方案。我试图修改此代码以适合我的代码，但我不确定如何从css中正确地调用div。

下面是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;
}

下面列出了我使用的按钮: 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;
  }

和HTML (点击按钮打开Modal)

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

Answer 1

要实现淡入淡出效果，可以使用jQuery fadeIn()，fadeOut()，method。在关闭模式的外部单击的div可以作为背景，您可以设置其onclick事件

Answer 2

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

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

Answer 3

然后是背景的css

.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. */
}