Lightbox Challenge

Question

Lightbox Challenge

152 views Asked by JD Sanders At 23 November 2024 at 04:16

All, I have been trying to get a lightbox working but seem to be failing. Any constructive help is greatly appreciated.

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.

Original Q&A

There are 1 answers

**divy3993** · Answer 1 · 2015-06-05 07:56:34

Check this out, I think you are looking for this

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 : NO Change

JS/JQuery

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

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

    });

Note: Will only work if you insert JQuery Library. Here its in head tags of html.

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

TechQA.

Lightbox Challenge

There are 1 answers

Related Questions in CSS

Related Questions in LIGHTBOX

Popular Questions

Popular Tags

Trending Questions