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

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

Jquery parent element selection

JQuery parent element selection is always needed code. Below I have listed how to get parent element in jQuery by tags,class,id etc. 

Try Demo Examples

Get first parent by tag name in jquery

$(“#id”).parent().closest(“DIV”);

Get first parent by id in jquery

$(“#id”).closest(“#id”);

Get first parent by class name in jquery

$(“#id”).closest(“.className”);

Get all parents by tag name in jquery

This will return array of all the parent div elements.

$(“#id”).parents(“DIV”);

Try Demo Examples

Also Check below links
How to select child element in jQuery 

If you found this post useful.Please share and comment. Thanks :)

JQuery Child Element Selection

JQuery parent element selection is always needed code. Below I have listed how to get parent element in jQuery by tags,class,id etc. 

Try Demo Examples

Get first child by tag name in jquery ( 3 ways explained)

$("#someId").children().first('div').attr('id'); $("#someId").find('div:first').attr('id') $("#someId").children('div:first').attr('id')

Get first child by id in jquery ( 2 ways explained)

$("#someId").children("#idToFind:first"); $("#someId").find("#idToFind:first");

Get first child by class name in jquery

$("someId").find(".someClass:first");

Get all child by tag name in jquery

This will return array of all the child tr elements inside the table.

$("#someDivId").find("#myTable tr")

Get all first td's of every row in table in jquery

This will return array of all the first child td elements inside every row of table.

$("#myTable tr td:first-child")

Try Demo Examples

Also Check below links
How to select parent element in jQuery 

If you found this post useful.Please share and comment. Thanks :)

Best JQuery Grid Plugins And JQuery Tables

Showing data in grid is the basic requirement all the time.Once the grid is ready, other necessary features gives good shape to grids like :

1. Sorting grid columns
2. Adding check boxes or other fields to the column
3. Having constant headers (This is many time a basic requirement of the data grid)
4. Loading data to data grid from xml,jason object via ajax call.
5. editing and saving details in the grid.
6. Free
7. Many more.

Below I have listed the best JQuery Grid Plugins which full-fills above requirement and features of grids:


1) jQuery Grid Plugin – jqGrid
This is the most popular and most efficient free JQuery Grid Plugin.Provides very nice documentation for customization.This grid is my favorite one.

Features: 
1) Supports XML,Jason,Arrray
2 )Ajax support
3) Well documented and good customization examples.
4) Demo’s with php support.
5) Many more.

        DEMO AND DOCUMENTATION

         Note * : JQuery grid is not free only 30 days of trial is available. Please check commercial licenses details.

2)Jquery mleibman/SlickGrid · GitHub

This is one of the other nice free jquery grid.Grid has nice support for colspans..Key features of this grid is nice support for filtering grid data.It has nice customisation demos listed.

DEMO AND DOCUMENTATION

Jquery Grid plugin by Slick Grid

3)JQuery Grid Data Table

Key Features :

1. Nice Ajax support.
2. Fully internationalizable.
3. jQuery UI ThemeRoller support.
4. Nice colspan support.




5. CUSTOMIZATION AND DEMO EXAMPLE

JQuery Grid By Data Table

4)JQuery Data Grid :Flexigrid :

        This simple easy to use JQuery Grid with nice UI, which comes with very less configuration and basic features.

DEMO

JQuery Data Grid :Flexigrid

5)Jquery Grid : JTable (JQuery Table)    :

This is one of the nice jquery grid plugin which needs some nice custom css. This has almost all the features.Listed below some key features:

Key features :

• Supports server side paging using AJAX.
• Supports server side sorting using AJAX.
• Row expanding feature is very nice
• Theme Changer
• Well updated and stable
• Many More:

DEMO AND DOCUMENTATION

Jquery Grid By JTable (JQuery Table) 

6) JQuery Table : WATable 

This simple grid and easy to use grid comes with very less configuration.

          DEMO and DOCUMENTATION

JQuery Table By WATable

7) JQuery Data Grid : INGRID 

This is simple jquery data grid. This grid is not updated from long time.

Demo And Documentation

JQuery Data Grid : INGRID

8)Jquery Excel Table : Handsontable

This jquery table works like excel spreadsheet. If you want to implement excel like features then use this Jquery datagrid.

Features :

1) Simple spreadsheet and easy to configure
2) Nice simple  UI
3) Supports Ajx
4) XML,JASON suppot

DEMO AND DOCUMENTATION

Jquery Excel Table By Handsontable

9)Jquery Grid Plugin - Table Sorter  

If you want to implement just sorting feature use this jquery grid plugin.

DEMO AND DOCUMENTATION

Jquery Grid Plugin - Table Sorter

10)JQuery Sheet :

This provides many excel sheet like features:

DEMO

Jquery Grid by JQuery Sheet

11)Jquery Grid: Tree Table

This jquery table plugin provide tree structure inside table like folder hierarchy.

          DEMO

Tree Structured JQuery Data Grid

12)Below are some more grids which has some very basic features:

1. Jquery Data Grid For Filtering Data By column : This grid filters data by column.
2. Best colspan manager Jquery Data Grid : If you have data greed and you want manage colspans efficiently then use this grid.
3. tGrid
4. Nice Table Sorter JQuery Data grid plugin : This provides animated table sorting and animated pagination.

Non-Free JQquery Data Grids

Below Listed Some fully featured well documented non-free JQuery data grid :

1) Juery Easy UI grid :
This is most efficient grid having all the features with well documentation.

Demo  Documentation

 

2) JQuery Grid By JQWidgets : Below is full featured grid by JQWidgets

Demo

Documentation

If you find this post useful please share and leave a comment below, thanks! :)