akModal: simplest alternative to thickbox

Posted on

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.

Here is an screenshot of akModal in action.

akModal: simplest alternative to thickbox

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

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

Dependencies
• DimScreen plugin(for blacking the background)
• 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]

90 thoughts on “akModal: simplest alternative to thickbox”

  1. Hi

    Thanks for putting this up. I usually use thickbox a lot but today I needed something really light weight that I could open from a google map and customize a lot.

    This was perfect – up and running in about 10 minutes.

    Cheers

  3. hi, nice plugin – really qorks great…

    with latest version 1.2.5 of jquery which i need for other functions firebug gives an error saying “jQuery.dequeue is not a function”.

    obviously the function(p,a,c,k,e,d) called by interface.js that akmodal depends on is not fully compatible with the latest jquery…

    do you have any idea how to solve or worka-around this error?

    thanks & best from berlin,
    dan

  4. Hi Dan,

    you may want to try “jQuery 1.1 Compatibility Plugin” and see if it solves you problem for now. i have not yet tested this plugin with jQuery 1.2.5, but soon i will do it and will release if i found any problem.

  5. thanks,

    but for me the jquery compatibility plugin 1.1. did not solve the problem (might be i have not implemented the compat. plugin properly – icluded right after jquery.js)

    a separate fix for interface.js (found at http://theneubeck.blogspot.com/2007/11/jquery-interfacejs-issues.html) solved it…

    my feature requests for an even better akmodal:
    a) option to fix the bg / parent
    b) option to drag the akmodal window by element (id)
    c) option to resize the akmodal window

    keep up the good work

    best,
    dan

  6. dan,

    thanks for the link it will help me a lot, and i have actually removed the dependency from the interface plugin by changing the function that i had used, since i received your feedback and was thinking of releasing it.

    I liked you suggestion some of them will be part of next release of akmodal.

    thanks,

  7. Amit,

    Good work, I agree that the version dependencies should be removed. Looking forward to the updated release.

    Bacardi

  8. Just thought that everyone should know that if the following code is simply pasted at the end of the akModal.js file, everything seems to have been resolved.

    /* Backwards compability to make JQuery to work with interface */
    (function($){
    $.extend({ dequeue : function(elem, effect) {
    $(elem).dequeue(effect);
    }
    });
    })(jQuery);

  9. Thanks for the plugin!
    I downloaded it but when I opened the test page you created I had some problems 🙁 Both in IE7 and Firefox the close img does not appear and the content (the sign-in form) is not even there!
    Help?

  10. sarah,

    akmodal_test.htm file is the demo, without changing anything, from the downloaded folder, just double click the demo file, then click on ‘sign in’ link you will see everything working fine.

    If you still can’t get anything working you can email me a screenshot, so that i can see exactly what is missing. Also check if there is any JS error you are getting.

  11. Thanks for replying so quick 🙂
    I’m obviously doing something wrong here I just dont’ know what because I haven’t changed anything in your demo file. I just opened the akmodal_test.htm file in the browser and this is what I get after clicking on the “sign in” link: the background darkens, the box comes up, I see the title “Sign In” with the red bgd but no X img and no content! (urg!)
    I’ll send you a screenshot if you let me know how.

  12. This is a great bit of code! I was trying to use Thickbox for a shopping cart, but found that it was very buggy when trying to pass a form to the Thickbox – this does it perfectly.

    I seem to have found a minor bug though. After calling $.akModalRemove, when I try to call $.showAkModal again, the little cross is missing from the top right hand corner.

    It remains like this until the original calling page is refreshed.

    The cross is definitely still there, because if I call $.akModalRemove again, I can see it moving across the page, but it seems to be positioned somewhere outside of the iframe (hope that makes sense).

    Still, I can live without that, so huge thanks to you for this.

  13. D’oh!
    Should have added:
    If I refresh the original calling page, and then call $.showAKModal, then the cross returns.
    Closing the window with the cross works fine, and when I next call it, the cross is still there.
    It’s only after calling akModalRemove that it disappears.

  14. if i have a flash covered on half of the page and flash is in default (windowless mode), will this appear above flash? I cannot use wmode.

    Thanks, RK

  15. RK,

    I am not sure as I have not checked it in this situation, may be you could try and check it out and let us know?

  16. hi,
    Thanks 4 putting this up,this simplified my work when ever i want something light weight.its been pretty simple 2 use it.

  17. This is great plugin indeed, very nifty and sleek.
    Far better than jDialog or any such thing.
    It is more convenient than DHTML window from http://www.dynamicdrive.com
    The only issue is to make it work with jQuery 1.2.6 some patch has to me made as suggeted by Michael Myles regarding dequeue related issue.

    I wish the author pathches up everything in one place rather than different users applying their own hack. I do appreciate that author’s time is important, but having done 95% right job why just hust leave 5%
    unattended.
    Thanks
    Sharad

  19. Thanks Amit for great job in Version 1.1
    It irons out most issues reported so far.
    I feel pretty confident with this now.
    TESTED OK In
    (1) Internet Explorer 7
    (2) Firefox 3
    (3) Safari 3.1.2
    (4) Opera 9.5
    I wish if I can help Amit by contributing man hours to his great work, unfortunately I am doing more work
    on server side Java, not much on Javascript.
    But however I can definitely stress-test his scripts in most browsers on most OS ( Win32, Mac, Linux ) and report any issue found.
    Thanks alot again
    Sharad

  20. Just one passing remark:
    I forgot to mention that Opera 9.5 shows some weird behavior.
    The background page of parent does not gray out fully, otherwise it is OK.
    Of course it is Opera’s problem not the problem with the script.
    However as on today Opera having less than 1% market share no knee-jerk reaction required, only future plan to see it can be handled.
    Just look at browser market share: http://marketshare.hitslink.com/report.aspx?qprid=0

    Thanks
    Sharad

  22. Hello Amit,
    thanks for the update.

    I have one request: Could you implement a code patch to make the window begin at least at the top of the browser window when the akmodal-box is bigger than the browser window? Now the upper part of the box is hidden and not reachable in that case.

    Should be some modifications in akmodal.js, I guess at the line containing “$(‘#ak_modal_div’).css({left:(((win_width/2-box_width/2))+scrollToLeft)+’px’,top:(((win_height/2-box_height/2))+scrollToBottom)+’px’});”

    I am looking forward to yor help.
    Thanks.

  23. Oh very good project but i think have to edit somethings.
    In akModal.js

    $(‘body’).append(“”);
    $(‘#ak_modal_div’).html(“”);

    because if when i call function 2 times with 2 url foreach…will be show the true url.

  24. Hi Amit,
    Thanks for this plug in,…
    I used it in my aspx page, where i have controls like dropdown,textboxes and gridview. The pop-up window pops up perfectly but the isssue is, in the parent window the drop down controls are not hidden and it allows to select them.
    Please provide a solution for this..
    Thanks And Regards ,
    Amar

  25. @Amar,

    I think that is the problem of dropdown control in Internet Explorer. I think you should try to increase the window size of plugin, to cover the area.

    Sorry could not help you much

  27. Hi.

    The plugin works great. I tried using the prettyphoto lightbox clone (as well as many others) as it has rounded corners but was unfortunately unable to get it to work alongside my content loaded via hashes so akModal it is. Only problem I have with akModal is the cross image close button changes position from time to time. I’ve tried editing the css to solve this but to no avail. I think this has been asked before. Do you have a solution?

    Thanks

  28. Has anybody used this along with the new Google Analytics code?
    I’m using this for an online store – the ViewCart page loads into AKModal.

    I recently added Google Analytics to the entire site. For some reason, every so often when loading the cart page (which also has analytics), I get an unspecified Javascript error 153 (no additional information is given). It doesn’t happen every time.

    This seems to be a google issue, but I can’t work out why – if anybody else has experienced it too, I would be grateful for some feedback.

    Thanks,

    Chad

  29. I found this very helpful!
    Thickbox was too thick and didn’t accept custom file dialogs, akModal does just wat you want it to do: work.

    Thanks, saved me a lot of time.

  31. Sorry,
    I tried to post my code but the blog removed it. All I did was make a default.aspx through VS 2005 and inserted the javascript calls and the anchor tag. No text is written to the page. If I remove the jQuery.js call, the text appears.

    Stumped.

    Kiley

  33. Hi,
    AkModal 1.1 version does not work in Opera 9.52 mac with any doctype.
    Only it works correctly without doctype.
    Does some solution exist?
    Thank you

    (I am sorry about my English evil)

  35. Hi

    Thank you for akModal works a treat

    My problem is that I am new to jquery/javascript – I have done most of my we programming with classic ASP

    My immediate issue is that in the login page I use ASP to check that the username/password are ok. How do get that information back to akModal window moreso if the login fails ie the akModal windoe not closing but message appears.

    Hope you can or direct me to such code

    thamks
    Moris

  36. Moris, you don’t need to do any thing. As the part that shows the login box is an Iframe you can show the error message and box will not disappear.

  37. Hi,
    I’m new to javascript and JQuery and I will thank you for this job that help me a lot to begin..
    I’m using it to select differents elements from differents sources and then refresh an ajax box in parent page with selections. So when you append the ak_modal_div from one source and then another source, the first content comes to you. So, I tried to give a different name to the akModal div but you can’t call the parent.$.akModalRemove() with the unknown named param..
    It’s easier to simply remove the div after any redirect !

    eg :
    akModalHideAndRedirect:function(redirect_url)
    {
    $(‘#ak_div’).fadeOut(500);
    $.dimScreenStop();
    $(‘#ak_div’).remove();
    window.location=redirect_url;
    },

    akModalHideAndLoadAjax:function(redirect_url)
    {
    $(‘#ak_div’).fadeOut(500);
    $.dimScreenStop();
    $(‘#ak_div’).remove();
    $(“#entities”).load(redirect_url);

    }

    hope this helps – diagnose is so long 😉

  38. Hi

    Thanks from your previous response

    HAve another problem. I am now trying to close the popup in ASP.NET (VB)
    and am having no joy
    I am using the following code
    If (Not ClientScript.IsStartupScriptRegistered(“akclosing”)) Then

    Dim scriptString As String = ” ”
    scriptString += “parent.$.akModalRemove();”
    scriptString += “”
    ClientScript.RegisterStartupScript(GetType(Page), “akclosing”, scriptString, True)
    End If

    Could you direct me to or provide a possible solution

  39. Hi,
    Is there a quick way to call for a function in the main opener page from the new modal box? meaning that if i open up a new modal box , can i call from it to a javascript function in the main window?

  42. then check for js error that you are getting, cause i have succesfully used ‘parent’ to access js function from inside akmodal to access functions in calling window.

  43. Hi, thanks for the reply,
    The error i get is that it doesn’t suuport this object.

    in the parent page i declare the function like this:

    function test(){}

    and in the modal page i call it like this:

    parent.test()

    but it doesnt seem to work,
    any ideas?

  44. how have akmodal.js and/or dimmer.js to be modified to enable setting the dim-factor on call of akmodal, like this: “$.showAkModal(this.href,’Window Title’,600,500,[dim_factor]);”? a default/fallback setting (of let’s say 0.5) if not given would be perfect…

    many thanks in advance.

    keep up the good work
    and best from berlin

  45. Hi

    I may be missing something, but I seem to have a problem. If the page is larger than the height/width specified I cannot get akmodal to scroll.
    In some cases the page is dynamically created and I do not know the height (the width is known) when the page loads in akmodal even though I have used overflow:auto the page seems to be cut off

    Is there a solution

    Moris

  46. Thanks for your response.

    However, I am not having much luck – most probably my limited knowledge of jquery.

    Where and how does one do this?

    Thanks

  48. this is great thanks,
    I have a funny issue: sometimes the ‘x’ button is floating in the wrong location (half way down the box) any idea why this might be?

    R

  49. ehm… what about framebreakers?

    there goes your akomodal.

    but nice you can use any stylesheet, as it is an iframe 😀 😀

  50. Akmodal works perfectly on local development machine but it gives this error on product,ion machine:

    Error: Object doesn’t support this property or method

    both machines are same and all files are same.

    url is http://ozeldersverenler.net/advertise.asp

    the info icon right to the fourth text box should open a window. but it gives error. can someone please tell me what I am doing wrong?

  51. Thanks for the great script, I spent a whole day looking for a modal script that could be fully customized to my look and feel and yours was the only one that allowed me to do so in like 20 minutes.

    Quick question, am running the script in a webpage where I need to call multiple instances of the script, how do i do that?

  53. Pingback: jquery plugins by name « Web Developer

  54. Savas, how did you resolve the “Error: Object doesn’t support this property or method” error? I too am having this same problem. Thank you.

  55. Regarding ruperts comment on January 8th, I was having the same problem. The close icon, “X”, would appear further down the popup window than it was suppose. The offset was equal to the scrollTop amount from its parent window. Here is how I fixed the problem:

    akModal.js — line 54
    X_top=offset.top

    I changed it to:
    X_top=offset.top – $(window).scrollTop()

    Hope this helps others.

  56. Hey Kevin,

    I did resolve it but to be honest, I don’t know how I did it. I was having problems at production server and it was working on development server. Apparently I was in the process of changing my production server for this website, so it worked on the new server without any problems.

    So I figure it is a server specific issue. I am sorry I cant be any help, because I havent figured out what was wrong on the previous server.

  57. How to access controls on parent page. Like if I want to modify/show/hide after I close the akmodal programatically, I want to use a hidden control on parent and how to access that modify the value on parent.

  58. I use AKModal for an online shopping cart.
    http://www.pampercake.co.uk

    In order to update the cart value on the main page I use this:

    parent.document.getElementById(“CartTotal”).innerHTML = “£0.00”;

    Ultimately, parent.document is the collection you want to use to access anything on the main page.

    If you want to see an example, just view the cart on the above site and then view the source.

    Hope that helps.

  59. Pingback: Caixa CSS modal - akModal | Links Web

  60. I have created a spreadhseet-type interface (multiple rows & multiple columns) built on an ajax_collection and I permit the user to edit each field via an ak_Modal_popup. I use the popup to limit possible entry values via a select list on the popup. I am encountering a problem when a user attempts to edit multiple fields before submitting the parent. The first popup works fine. When the user selects the second field to edit, they get the first popup. If they cancel this popup and select again they get the correct popup. If they should select a third field to edit, they have to cancel the previous popup twice and on the third try, they get the correct popup. This continues to propagate until the parent is submitted. I do make each a href id unique to the row and column, but perhaps I am overlooking something? Thaks.

  62. Never mind about the popup alert box, I completed it.

    I want to know how to refresh the parent page once the modal window is closed. Thanks.

  63. Sonia,

    You can chain an additional javascript command after issuing the $.parent.akModalHideAndRedirect(parent_url); By default, simply issuing this command will reload the parent page essentially “refreshing” it. If not, try
    $.parent.akModalHideAndRedirect(parent_url);parent.history(0);

  64. I have a web page with iframe. The akModal is implemented in the html inside that iframe. When I click the link, only the iframe’s area take effect but not the parent/whole area.

    Anyone know how to set about it?
    Thanks in advance.

  65. hi

    I am using akModal to open a pdf. It works ok in various browsers but not Firefox. I get akModal popping up ok but with a white screen and at the bottom of the Firefoxwindow I get the message stopped

    I use the following code
    <a href=”casestudies” id=”ak_casestudy” class=”two” onclick=”$.showAkModal(this.href,’Case Study ‘,800,760);return false;” target=”_blank”>

    Is this something in FF or me?

    Thanks
    Moris

  66. hi
    is it possible to put validations to fileds at inline poup, and is it possible to inline popup submit using ajax, can u please provide the detail explanation.

    thank you.

  68. Regarding Mike’s (March 8, 2009 7:27 pm) fix to the X placement when the main page is scrolled. I am still having that problem even with Mikes fix in. The X is still dropping down too far based apparently on the scroll. Scroll down on the main page, the X scroll down from where is should be on the top right corner of the pop up box.

  69. Thanks ! its really great work,

    I am using asp form for login, I am just getting problem when close the window, the parent window doesn’t refresh automatically

    Can you please help

    thanks

  70. Dev,

    See my previous post to Sonia. Basically, you will want to use something like:

    $.parent.akModalHideAndRedirect(parent_url);parent.history(0);

    Where parent_url is obviously a string to your parent, or calling, page.

    Hope this helps.

  71. Hi

    Am using your popup and it works great except for one thing. Occasionally the red X will move down the vertical scroll bar about 50px or so.

    Any ideas why this would happen ?

    Thanks

    Mark

  72. I am getting an Error: $.showAkModal is not a function. I am using prototype and scriptaculous in the same file. Help!

  74. Have you ever gotten an embedded Flash movie to run in the popup? All I get is a empty are with my button.

    thanks for any insight

  76. OK now I have a real problem. When I close the window in IE NOT FF(it works) the movie continues to play UNLESS I click on the parent window, even an empty part of the window.

    I suspect it could be fixed with Ed McGees suggestion but my Javascript is very poor. I am not seeing the function he refers to only:

    akModalHideAndRedirect:function(redirect_url)

    Ed can you be a little more specific? I’d sure appreciate it and so would others I suspect.

    Thanks for any answers in advance!

  77. Is it possible to use this as a simple popup.. as in.. without darkening the surroundings and without making everything in the background inactive???
    How can i use it as a simple tool tip popup??
    advice please…

  78. Pingback: akModal alternative to thickbox using Jquery | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP

  79. Pingback: Jquery – akModal alternative to thickbox | Huuich.biz

  80. I’m trying to use this to open a form and I’m just getting firebug throw a syntax error at –

    $.showAkModal(this.href

    I’m using the following code to call the modal box

    Add Show

    Anyone got any suggestions

  83. There seems to be a bug in akmodal. I have a php page where am calling up multiple different instances of akmodal. One instance calls up an edit line item page the other instance calls up a add line item page. The problem is that if you click one one link it defaults to that on all the modal pages….e.g if I click on the addline item link it will do the modal page correctly however if I click on the edit line item link without reloading the page it instead calls the addline item link I clicked before. A simple fix is to change the code from $(‘body’).append to $(‘body’).prepend. This seems to fix that problem

  84. i have a problem about resize the pop-up :

    if pop-up is already opened of width 500X400 then i need make a link into that pop -up and when i simply click on that link then i wish pop-up is resised of width 200×200.

    how can i do that please help me..

  86. Hi,

    Iam using AKModel popup, but I have a scenario like adding of data from model popup and displying the resulted data in parent page but model popup should not get closed, for each adding i should able to see the resulted data in parent page.
    Can anyone please guide me

    Thanks in advance

  87. How to refresh a parent window By keeping child window open, when clicking on submit button in child window.

Comments are closed.