Responsive jQuery Window & Modal System For Bootstrap - Bootstrap Window

Bootstrap Window is a powerful jQuery plugin that takes advantage of Twitter's bootstrap to create responsive & bootstrap-style window and modal system for your website & web app.

With this plugin you can create:

• Simple window floating on your web page.
• Draggable window with close and action buttons.
• Form window with submit button.
• Modal window with fullscreen overlay effect.

How to use it:

1. Add the bootstrap, bootstrap theme and jQuery Bootstrap Window CSS files to the head section of your page.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap-window.css">

2. Create a link to open a simple window.

<a href="#" class="basic"> Add Basic Window </a>

3. Include the jQuery javascript, Bootstrap framework and jQuery Bootstrap Window plugin at the end of your document.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap-window.js"></script> 

4. Create a simple window in the javascript.

(function ($) {
var wm = new WindowManager({
container: "#windowPane",
windowTemplate: $('#basic_window_template').html()
});
window.wm = wm;
var basic_counter = 0,

$('.basic').on('click', function (event) {
event.preventDefault();
basic_counter++;
wm.createWindow({
title: "Basic Window #" + basic_counter,
bodyContent: "<p>One fine body...</p>",
footerContent: '<button type="button" class="btn btn-default" data-dismiss="window">Close</button><button type="button" class="btn btn-primary">Save changes</button>'
});
});

}(jQuery));

Change log:

v0.2.2 (2013-11-30)

• Fix for quick window titles not displaying

v0.2.1 (2013-11-06)

• Fix for responsive windows on orientation change

---

This awesome jQuery plugin is developed by earmbrust. For more Advanced Usages, please check the demo page or visit the official website.