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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial