how to create a light box inside a php Script?

Hi All

i Have Calendar which shows event from the database.
 
i would like to create lightbox to show the event dicsription while clicked on the event description

if any  one know the steps to create lightbox?
vishnu kalakotaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
There are libraries to do this but it is actually quite simple to do. Here is some sample code
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.overlay {
  background: rgba(0,0,0,.8);
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
}
.lightBoxContent {
  position: absolute;
  left: -900px;
  top: 0;
  background: white;
  padding: 20px;
  border: 2px solid gray;
}
.lightBoxClose
{
  position: absolute;
  top: -10px;
  right: -10px;
  display: block;
  width: 24px;
  height: 24px;
  background: #fff url(http://littlealchemy.gamelytic.netdna-cdn.com/wp-content/plugins/itro-popup/images/close-icon.png) no-repeat 0 0 / 24px 24px;
  border-radius: 24px 24px;
}
.lightBoxContent, .lightBoxClose {
  box-shadow: 5px 5px 5px rgba(0,0,0,.6);
}
.lightBoxClose:hover {
  cursor: pointer;
}
</style>
</head>
<body>
<!-- The handle to open the lightBox - with the href pointing to the container that houses the information -->
<a href="test"class="lightboxOpen">Click me</a>

<!-- The content box - id is set to the HREF of the <a> it is linked to -->
<div id="test" class="description lightBoxContent">This is the description</div>
</body>  
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(function() {
  $('.lightboxOpen').click(function(e) {
    e.preventDefault();
    var content = $('#' + $(this).attr('href')).clone();
    showLightBox(content);
  });
  $('body').on('click','.lightBoxClose', function(e){
    e.preventDefault();
    $('.overlay').remove();
  })
});
function showLightBox(content)
{
  var overlay = $('<div/>').addClass('overlay').append(
    content.attr('id', '')
  ).css({height: $(document).height()});
  $('body').append(overlay);
  content.append($('<a/>').addClass('lightBoxClose'));
  content.css({top: ($(window).height() - content.outerHeight()) >> 1, left: ($(window).width() - content.outerWidth()) >> 1});
}
</script>
</body>
</html>

Open in new window

0
Julian HansenCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
vishnu kalakotaAuthor Commented:
Thnak you
0
Julian HansenCommented:
You are welcome - good luck with your project.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.