anchor tag pops up a div instead of a new page

Question

I was wondering how to implement a popup div that had its own address. The example in question is the Chrome Extensions Store: https://chrome.google.com/webstore/category/extensions

If you click a tile on that site, not only will the content pop up in form of a div, but it'll also have its own address. So if I copy the address and paste it onto a new window, it goes to the same popup. Not only that, if you click back button (or backspace), it closes the pop-up div instead of going back to previous page.

If there is no simple way to implement this, I'd like to know what javascript object or something I'd have to learn about to do this.

I'm not sure if this is the right SE forum to ask, but I had to ask someone.

Answer 1

You can use bootstrap modal. It's very good

here is the code,

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 2

I didn't see the link you are talking about but I think they are hack the behavior of the link and instead of going to the clicked url show it'e content on an popup div. in jquery you can do it by something like preventDefault

Answer 3

If you click a tile on that site, not only will the content pop up in form of a div, but it'll also have its own address. So if I copy the address and paste it onto a new window, it goes to the same popup.

This is called stateless UI which can easily be achieved with for example router in Angular or Ember.

The idea is that every state in your application has its own address. If for example, your application has an entity user then the url to see a specific user would be

http://example.com/user/12345

Where 12345 is userId

At the same time to open an edit form for this object you might use

http://example.com/user/12345/edit

Irrelevant of when you get to the latter, your application will always open an edit form for user with id=12345

To understand this better you need to get acquainted with some principles of MVC and perhaps examine ui-router tutorial as an example of implementation