Creating a draggable content pop up

A draggable content pop up is similar to a modal window. However, it is movable by the user and does not come with a backdrop to focus the user's attention, allowing them to view other content at the same time. This recipe will adapt the modal code used in the preceding recipe and the jQuery code from the Creating a basic drag-and-drop functionality recipe that you saw earlier in this chapter.

Getting ready

Even though we will be re-using code from previous chapters, ensure that you have recipe-11.html, recipe-11.css, and recipe-11.js created and ready for use.

How to do it…

Perform the following steps:

  1. Add the following HTML code to recipe-11.html to create a modal and a basic web page:
    <!DOCTYPE html> <html> <head> ...

Get jQuery 2.0 Development Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.