open a small screen with text and images in HTML - html

Question

I am working on a website.
Now what I want is to open a small screen with text and images,which pops up when a link is clicked.
I don't want to open small sized webpage..
What I want is similar to this in chrome.. "chrome://settings/startup"
please if someone can tell me what this feature is called and how it is implemented It will be helpful.

Answer 1

It's called a modal window. Not a real pop up.
Create a div with id
<div id="modal">
// your content with images
</div>
CSS
#modal {
position: absolute;
z-index: 99;
top: 25%;
width: 400px;
height: 300px;
margin: auto;
display: none;
}
Now in javascript:
On click of the link, show the modal window
$("#buttonId").click(function() {
$("#modal").show();
})
There already many plugins which does this:
Jquery UI
Bootstrap
But, if you have Chrome or a modern browser, use the <dialog open> tag (like a div) and use id's to edit the dialog via JS, such as:
window.<id>.close(); // closes dialog/hides it
window.<id>.show();
window.<id>.showModal(); // instead of showing it regularly, it puts it to the middle of the screen and greys the background like an alert. (you can edit the background effect with CSS)

Answer 2

If you want to use pure html, probably you can use window object. It has several types of popup window method, like window.alert(), window.comfirm(), etc.
If you want to use with javascript and css, then there are many ways to implement it. Here is a simple example I found:
[1]http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/