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()方法。关闭模式的外部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为背景

MenuInflater menuInflater = new SupportMenuInflater(this);
menuInflater.inflate(R.menu.options_menu, menu);

Answer 4

你的语法似乎错了。您必须删除 jQuery 并将整个内容替换为：

!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)

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>

开源模式框/ JavaScript修改/关闭点击外部模态

4 个答案: