Question

全部，我一直试图让灯箱工作，但似乎失败了。非常感谢任何建设性的帮助。

function lightBoxOn() {
  $('#light').show();
  $('#fade').show();
};

function lightBoxOff() {
  $('#light').hide();
  $('#fade').hide();
};

function processData() {
  document.write('Yes')
  lightBoxOn();
  //do some long running stuff

  //lightBoxOff();
}

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 40%;
  left: 40%;
  width: 20%;
  height: 10%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index:1002;
  overflow: auto;
}

<div>
  <input type="button" value="Press Me" onclick="javascript:processData()"/>
</div>
<div id="light" class="white_content">Processing your request... 
  <a href = "javascript:void(0)" onclick = "javascript:lightBoxOff()">Close</a></div>
<div id="fade" class="black_overlay"></div>

I have a code pen here.

Answer 1

检查一下，我想你正在寻找这个

WORKING:DEMO

<强> HTML

<html>
  <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
    <body>
<div>
    <input type="button" value="Press Me" />
</div>

<div id="light" class="white_content">
    Processing your request... <a href="#">Close</a>
</div>
<div id="fade" class="black_overlay"></div>
    </body>
</html>

CSS ：无变化

<强> JS / JQuery的

$(document).ready(function(){
$("input[type=button]").click(function () {
    $(".black_overlay, .white_content").fadeIn();
});

$("a").click(function () {
    $(".black_overlay, .white_content").fadeOut();
});

    });

注意：仅在插入JQuery Library时才有效。这里是html的头标记。

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

灯箱挑战赛

1 个答案: