---
title: "akModal: simplest alternative to thickbox"
url: https://thecancerus.com/akmodal-simplest-alternative-to-thickbox/
date: 2008-04-15
modified: 2014-03-24
author: "ican"
description: "For those in hurry, download the plugin from jquery plugin page [download#11#nohits] It is a modal pop up box. It can be used to display any url as popup box...."
categories:
  - "jquery"
tags:
  - "akmodal"
  - "alternative to thickbox"
  - "jquery"
  - "lightbox in jquery"
word_count: 407
---

# akModal: simplest alternative to thickbox

*For those in hurry, download the plugin from jquery plugin page* `[download#11#nohits]```

It is a modal pop up box. It can be used to display any url as popup box.

It’s simplicity lies in the fact that, we can use it to display forms etc, and then submit the forms, something like I used it for [thesoko login box](http://thesoko.com/thesoko).

Here is an screenshot of akModal in action.
![akModal: simplest alternative to thickbox](http://thecancerus.com/wp-content/_1208233754223.png)

I had created this when I didn’t know enough javascript to use AJAX etc, for submitting a form. I also didn’t want to write very complex javascript for something that can be easily handled using a simple iframe.

**Anatomy of akModal Box**

![Anatomy of akModal](http://thecancerus.com/wp-content/img.jpg)

**Features**
• Easy to create popup box
• No AJAX required for submitting forms

**Dependencies**
• [DimScreen](http://docs.jquery.com/Plugins/dimScreen) plugin(for blacking the background)
• [Dimensions](http://plugins.jquery.com/project/dimensions) plugin(for center alignment)
• Interface plugin (for puff effect)

**How to create it**
This is the simplest process of all; you need to include all the dependencies along with akmodal.js file. Then just call
* $.showAkModal(navurl,title,box_width,box_height)* function onclick event.

*navurl*: it is the url to show in the popup box.
*title*: is the title to show for pop up box.
*box_width* & *box_height*: it is width and height of the pop up box that you want to show.

For example,
<a href='test.htm' id='ak_sign_in' onclick="$.showAkModal(this.href,'Sign In',230,170);return false;"> sign in</a>

**How to destroy it**
There are two functions that you can call from inside the iframe, to remove the pop up box.

1. First function is **akModalRemove()**, this will simply remove the popup box from the view, as it does when you click the close button in title of popup box. To use this function from our Iframe window just call this function like this
parent.$.akModalRemove();
2. Second function is **akModalHideAndRedirect(redirect_url)**, this will remove the popup box and redirect the page to url specified by *redirect_url* parameter. This function is useful when you have sign in forms etc, where on successful login you want to show the user, a bit customized page. To use this function from Iframe window just call this function like
parent.$.akModalHideAndRedirect(‘http:amiworks.co.in/talk’);
**How to customize it**

Just goto line number 35 in akmodal.js file, and change the styles etc as per your requirement.

If you need more information leave a comment below.

**Update(5th July 2008) :** released version 1.1.0.

- This version removes the error that was due to dependency on interface plugin.
- Updated to use dimensions plugin 1.2

Version 1.0 can be downloaded from `[download#1#nohits]`