cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

pop-up windows

webmaster698
Explorer ,
Mar 09, 2017 Mar 09, 2017

Hi

I am looking for a simple way to create a pop-up window when the user clicks a hyperlink.  When the user clicks the hyperlink, I need a pop-up window to overlay on the screen (smaller size), with the original page still being displayed in the background. Can this be done, relatively simply?

Thanks

1.8K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Mar 09, 2017 Mar 09, 2017

As a working example:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</h

...
Translate
replies 8 Replies 8
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Mar 09, 2017 Mar 09, 2017

It's called a model window or lightbox.

If you're using Bootstrap, modal windows are built-in to the framework.  See example below.

Bootstrap Modals

If you're not using Bootstrap, do a Google search for jQuery Lightbox or Fancybox plugins.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
webmaster698
Explorer ,
Mar 09, 2017 Mar 09, 2017
In Response To Nancy OShea

Hey,

Thanks for the info.  If I am already using a bootstrap, named "bootstap.cc", should I create a new bootstrap named "modal.js"?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
webmaster698
Explorer ,
Mar 09, 2017 Mar 09, 2017
In Response To webmaster698

I meant to say "bootstrap.css". Sticky keyboard

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Mar 09, 2017 Mar 09, 2017
In Response To webmaster698

If you're using a complete Bootstrap document, you don't need anything more than the requisite classes in your HTML code.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Mar 09, 2017 Mar 09, 2017
In Response To Nancy OShea

As a working example:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

<div class="container">

<h2>Modal Example</h2>

<!-- Trigger the modal with a button -->

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->

<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-header">

<h3 class="modal-title pull-left">Modal Header</h3>

<button type="button" class="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button>

</div>

<div class="modal-body">

<h4>Modal Body</h4>

<img class="center-block" src="http://dummyimage.com/500x325.jpg" alt="placholder">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure eveniet, reprehenderit est odit aliquid, dolor aut perspiciatis laboriosam illo, doloribus commodi.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure eveniet, reprehenderit est odit aliquid, dolor aut perspiciatis laboriosam illo, doloribus commodi.</p>

</div>

<div class="modal-footer">

<h5 class="pull-left">Modal Footer</h5>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

</div>

<!--/modal--></div>

<!--/container--></div>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

</script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
webmaster698
Explorer ,
Mar 09, 2017 Mar 09, 2017
LATEST
In Response To Nancy OShea

Thanks Nancy for your help. Your information is working out for me.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jon Fritz Community Expert
Community Expert ,
Mar 09, 2017 Mar 09, 2017

Look into "css modal windows" in Google (there are many tutorials).

Javascript solutions aren't the best option for this anymore given the ubiquity of pop-up blockers in browsers these days.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
webmaster698
Explorer ,
Mar 09, 2017 Mar 09, 2017

I am looking for an HTML code

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices