Simple Modal Box Using JQuery

-
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.



USAGE

SimpleModal provides 2 simple ways to invoke a modal dialog.
As a chained jQuery function, you can call the modal() function on a jQuery element and a modal dialog will be displayed using the contents of that element. For example:
$("#element-id").modal();
As a stand-alone function, a modal dialog can be created by passing a jQuery object, a DOM element, or a plain string (which can contain HTML). For example:
$.modal("<div><h1>SimpleModal</h1></div>");
Both of the methods described above, also accept an optional options object (nice tongue-twister, huh?). Using the examples above:
$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});
Because SimpleModal is more of a modal dialog framework, both of the examples above would create very basic, unstyled, modal dialogs. Styling can be done through external CSS or through properties in the options object. See the Options section below for a detailed list of the available options.

STYLING

Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are: overlayCss, containerCss anddataCss, all which take a key/value object of properties. See the jQuery CSS Docs for details.
SimpleModal handles setting the necessary CSS for displaying the modal dialog. In addition, SimpleModal dynamically centers the modal dialog, unless the position option is used, which takes precedence.
SimpleModal internally defines the following CSS classes: simplemodal-overlay,simplemodal-container, simplemodal-wrap (SimpleModal will automatically set the overflowto auto if the content gets larger than the container), and simplemodal-data.
* Note: SimpleModal's default closeHTML option declares the modalCloseImg class in order to display an image for closing the dialog. Download the image. Because it is defined in an option, it cannot be styled through the options - an external CSS definition is required:
#simplemodal-container a.modalCloseImg {
 background:url(/img/x.png) no-repeat; /* adjust url as required */
 width:25px;
 height:29px;
 display:inline;
 z-index:3200;
 position:absolute;
 top:-15px;
 right:-18px;
 cursor:pointer;
}
For IE6, you might want to apply the PNG fix:
<!--[if lt IE 7]>
<style type='text/css'>
 #simplemodal-container a.modalCloseImg {
  background:none;
  right:-14px;
  width:22px;
  height:26px;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
   src='img/x.png', sizingMethod='scale'
  );
 }
</style>
<![endif]-->



DOWNLOAD



SimpleModal is hosted on Google Code:

Comments

Post a Comment

Popular posts from this blog

Create Desktop Application with PHP

-
Image
Here we will show you how you can create a web-based desktop application using PHP, CSS, HTML, and JavaScript with the help of PHP Desktop. In fact, PHP Desktop is an easy and simple solution we can use to create very powerful and complex desktop application. What Is PHP Desktop? PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite. Mind you, the development workflow you are used to while creating web applications remains the same. The step of turning an existing website into a desktop application is basically a matter of copy and paste. PHPDesktop is an all-made container that will just swallow your project. With that, you can easily transform an existing website into a desktop application without any modification. When you download PHP Desktop , you will have some set of files and folders; among them you will have a ...
Read more

Insert pandas dataframe into Mongodb

-
Image
Insert pandas dataframe into Mongodb Pandas is most commonly used open-source Python Library for data manipulation, it provides high-performance data manipulation and analysis using its powerful data structures. Here we use pandas library to insert dataframe into Mongodb. I am taking Yahoo finance library to get dataset for a ticker and save that data into Mongo. First, we import all the necessary libraries from pandas_datareader import data as pdr import pandas as pd from pymongo import MongoClient import yfinance as yf yf.pdr_override() We get data from yahoo finance  # download dataframe data1 = pdr.get_data_yahoo("SPY", start="2017-01-01", end="2017-01-15") Now, we make a connection to Mongodb. Here I am connecting to local MongoDb Server on port 27018 and then creating a database with the name `finance`. MongoDB has a collection(table) and I name it as `mycollection`. #Step 1: Connec...
Read more

Add and delete columns dynamically in an HTML table

-
To add new rows to a table (or table section) you can use insertRow, but there isn't an equivalent insertColumn in the  DOM table methods . So what you can do is iterate the rows in the table (or table section), and call insertCell for each row. Javascript:   tableaddcolumn.js // 2006-08-21 - Created // 2006-11-05 - Modified - head and body function addColumn(tblId) { var tblHeadObj = document.getElementById(tblId).tHead; for (var h=0; h<tblHeadObj.rows.length; h++) { var newTH = document.createElement('th'); tblHeadObj.rows[h].appendChild(newTH); newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1) } var tblBodyObj = document.getElementById(tblId).tBodies[0]; for (var i=0; i<tblBodyObj.rows.length; i++) { var newCell = tblBodyObj.rows[i].insertCell(-1); newCell.innerHTML = '[td] row:' + i + ', cell: ' + (tblBodyObj.rows[i].cells.length - 1) } } function deleteColumn(tblId) { v...
Read more