Pages

Thursday 29 November 2012

Popup Div In Css and Jquery Or pop up windows in javascript


Below I have explained how to create simple html div popup div using css and jquery. Try running example and check simple css and jquery code.

Features :

 1) Draggable HTML popup div.
2) Elements behind the popup div will be disabled until popup div is active.
3) Easy customizable css.


Click here to see DEMO In broad window

Cick here view source of example html page 


 Required Javascript URL's For Popup Div:

  • <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  • <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Below is css ,javascript and html of the example:

Screen Shot of pop up window in javascript:

pop up window in javascript
pop up window in javascript

If the information is useful please comment and share. Thanks :)



Posted by at
Labels: , ,

6 comments:

  1. Unknown26 June 2013 at 20:34

    Thanks

    ReplyDelete
  2. Ron Logsdon15 December 2013 at 15:29

    Your script does not work in Firefox. Do you have a work-around?

    ReplyDelete
  3. Unknown9 February 2014 at 10:42

    It is working perfectly fine in firefox check below link :
    http://jsfiddle.net/ehQ6A/1/light/

    ReplyDelete
  4. Charlie27 March 2014 at 10:32

    This is wonderful, but how do I allow multiple popups. For example, I need to have a list with each list item opening its own popup with unique information. I've modified the HTML, but I'm not sure what part of the javascript I need to modify. Thanks in advance!

    ReplyDelete
    Replies
    1. Unknown27 March 2014 at 11:00

      To achieve this you need to create popup html inside jQuery code and then apply the events in code by looping your list.

      Delete
  5. Unknown18 August 2015 at 23:21

    complete code someone post please

    ReplyDelete

Subscribe to: Post Comments (Atom)