Create Moveable Windows In jQuery | jDoor

jDoor is a jQuery plugin for creating animated/moveable windows that can be brought from the background to the front and vice versa. The rear windows will be locked, and only the focus window can be used.

How to make use of it:

1. Load the primary script and core stylesheet within the doc.

<link rel="stylesheet" href="/path/to/jdoor/jdoor.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jdoor/jdoor.js"></script>

2. Create a moveable window on the display screen utilizing the next parameters:

// $(targetscreenId).jdCreateWindow(windowId, x, y, width, height, title, content)
$('#targetContainer').jdCreateWindow('my_window_id', 100,100, 'dyn', -50, "A window", "This is <br />just<br /> a<br /> window. <div style='width:40px; height:40px; background-color: #FA0;'></div>");

3. Embed a Youtube video into the moveable Window.

// $(targetscreenId).jdCreateYoutubeWindow(windowId, x, y, width, height,title, youtubeid)
$('#targetContainer')jdCreateYoutubeWindow('youtube_window', 100,150, 200,'dyn',"Youtube Window", "8Ltr_IkvKmc");

4. Show & cover the moveable Window.

// show a window

// remove all windows

5. Replace the content of a window.


6. Override the default types of the window.

.jdwindow {
  border: 2px solid #FC2C25;
  background-color: #222222;
  color: #FFF;
  font-family: 'Roboto';
  font-size: 12px;

.jdwindow-top { 
  background-color: #FC2C25; 
  padding-left: 5px;

  background-color: #911;
  font-size: 16px;
  text-align: center;

Windows-like Moveable Windows, jDoor Plugin/Github


See Demo And Download

Official Website(benis-bastelschuppen): Click Here

This superior jQuery/javascript plugin is developed by benis-bastelschuppen. For extra Advanced Usage, please go to the official website.

Related Posts


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


Simple Popup Box In Vanilla JavaScript | Creativa – Popup

Vanilla JS Popup is a simple library that allows you to create great popups for importing just one JavaScript file. Creativa is a lightweight, easy-to-use, customizable, responsive popup…


Responsive Lightbox Image Gallery Using Vanilla JavaScript

Lightbox opens after the user clicks on an image from the gallery. A completely responsive iMAGE gallery that enables the consumer to open the photographs in a…


Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Flow diagram allows you to create data streams easily and quickly. Install a JavaScript library only and have four lines of code. Draw flow is a JavaScript…


[Drag And Drop] A Minimal Javascript Library to Create Flow Charts | Flowy.js

Flowy makes creating web applications with the flowchart function a very simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by applying…

Leave a Reply

Your email address will not be published. Required fields are marked *