45

I want to make popup div instead of popup window for my 'About' picture/page with current button like in this example: OMG! Ubuntu! Facebook like popup

static_rtti
  • 53,760
  • 47
  • 136
  • 192
  • 1
    Questions asking for code should show a **minimum** understanding of the problem. This means you'll have to include attempted solutions, why they didn't work and the expected results **in your question**. – Sumurai8 Sep 28 '13 at 08:34
  • 1
    You may use: Reveal jQuery Modals: http://zurb.com/playground/reveal-modal-plugin – Imran Omer Sep 28 '13 at 08:37

3 Answers3

139

DEMO

In the content area you can provide whatever you want to display in it — using the following code from https://gist.github.com/westonwatson/3914027 that I have copied in here:

.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: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
<html>

<head>
  <title>LIGHTBOX EXAMPLE</title>
</head>

<body>
  <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
  </p>
  <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
  </div>
  <div id="fade" class="black_overlay"></div>
</body>

</html>
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
  • 11
    Great code, but both positions should be `fixed`. If user clicks the link after having scrolled, the overlay & modal window go to the top of the page. – Kasperi Apr 27 '14 at 22:17
  • 3
    For anyone who is interested, if you want the overlay to "expand past" the viewport (i.e. take over the whole page) Set the position to fixed. This will make it appear as though the whole page has the overlay. – taylorcressy May 26 '14 at 15:38
15

You can simply use jQuery UI Dialog

Example:

$(function() {
  $("#dialog").dialog();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
</head>

<body>
  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>
</body>
</html>
Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
Yair Nevet
  • 12,725
  • 14
  • 66
  • 108
8

For the sake of completeness, what you are trying to create is a "modal window".

Numerous JS solutions allow you to create them with ease, take the time to find the one which best suits your needs.

I have used Tinybox 2 for small projects : http://sandbox.scriptiny.com/tinybox2/

Laurent BILLON
  • 97
  • 2
  • The asker ask about HTML pop-up within the page, not "modal window". – dns Jun 18 '16 at 19:33
  • 1
    I would NOT recommend TinyBox. It's undocumented and the source code is obfuscated. You'll have trouble all the time. – John Nov 26 '16 at 15:52