logo

Making pop-up windows modal


Hmm, the infamous Pop-Up Windows I don't know about you but they are enough to make we want to scream sometimes. More often than not nowadays they are the source of advertising (something that codestore must show I shy away from). Whenever I see one now I automatically close it before it has chance to load (cursing beneath my breath at the site's audacity, daring to do things on my PC that I didn't ask them to do).

The only time I give them chance to load is when I have made some interaction with the page, from which, I would expect to see a pop-up as the result.

This is not to say that I don't think they are useful. They are. Just when used under certain circumstances. When we are talking about Domino then the only one that stands out is the need to gather information from a user beyond that which is normally required. For example, a form that has a list of options followed by "Other". Choosing "Other" requires the user to make further choices - an ideal use of the pop-up. Now I'm going to be even more pedantic and talk about the modal state of these pop-ups. They are not modal. As much as you try to make them so, using JavaScript blur and onfocus methods, they will not become modal. These non-modal pop-ups have the annoying ability of sticking around when they are no longer required, having failed in their duty to perform a certain function. This is where the modal dialogue comes in.

Don't worry, I am going to stop ranting and start telling you something you want to hear right now.


To see a TRULY modal dialogue click on this link. You will need to be using IE4+ to do this. What you should see is a window that remains in focus even when you try to focus back on the parent window (this document). The beauty of this is that it means that whenever you need to use a pop-up, you can always rely on the user having had to do what was required, before they can carry on.

In this document I discussed how you go about returning a value from a pop-up back to its parent window. This is all very well but the pop-up is non-modal and can get left in the background. Let's see how we go about reproducing this same feature with the above modal method. Click on the "Choose Colour" button below to launch the "pop-up" and return a colour to the text field:

Colour:


So, how does this work:

Well for a start, don't worry, this isn't one of those dodgy uses of methods like onBlur and focus to trick you in to thinking a window is modal. This method uses an actual method of Internet Explorer's window object called showModalDialog.

To use this method, the first thing we need is to add a couple of functions to the parent form. Here's the first:

function myColourDialog(){
var myColour;
}

This is simply there to act as a container object for the variables that you want to pass back and forth. You can change the name of this function and add as many variables as you need. Let's see what the next function looks like:

function openColourPickerDialog(wnd, field, dlgURL)
{
myColourDialog.myColour="";
if(wnd.showModalDialog(
dlgURL,
myColourDialog,
"dialogHeight:150px;dialogWidth:300px;")
== true )
{
field.value = myColourDialog.myColour;
}
else
{
return;
}
}

Here we initialise the value of the "myColour" variable and then open the Pop-Up. Notice that we passed the myColourDialog object in as one the arguments. This is how the new window knows what values we are working with.

The above function works by waiting for a returnValue from the Pop-Up. This will be true or false depending on whether the user cancels the pop-up or chooses a colour. If they choose a colour and then the return value is true the field on the parent has its value set to that of the myColour variable.

To call the pop-up we use a call like the one below in somwhere like the onClick event of a button:

openColourPickerDialog(window, document.forms[0].TextOutput, '9F0D8552077A408686256999005AC70D/$file/new_window.htm')

As part of this call we have passed the parent window's object. We also pass the field to which we want the chosen value returned and the URL of the page to use to display the choices.

All you need now is to add a function on to the pop-up form itself:

function sendAndClose( selObj ){
if ( selObj.selectedIndex != 0 ){
window.dialogArguments.myColour =
selObj.options[selObj.selectedIndex].text;
window.returnValue=true;
window.close();
}
}

This is then called from a button on the form in the pop-up, in its onclick event, like so:

sendAndClose(this.form.Colours);

"Colours" being the name of the drop-down field in our example.

So, there you have it. This is the minimum you need to exchange data with modal pop-ups. You can take it as far as you need by editing the functions I've listed above to your needs. This can really be quite powerful once you understand the basics...

One small thing:

As great as this method may appear it does have one drawback. You can only use static pages in the pop-up. So, for instance, you couldn't display a view with a Next and Previous link, as this would require the page to be submitted back to the server. IE doesn't like that.

Other reading:

You can learn more about this method of the window object at the Microsoft site: About the showModalDialog method

Feedback

  1. Modal Windows

    I use modal windows to replace notes popup selection boxes for the web.

    I lob my html into a form - include an <iframe> that picks up xml using getviewentries and then parses it using xslt - then with a bit of javascript and styling repeats all the functionality of a java view - except that it works and loads v quick. If anyone wants an example I could try and put together an example - let me know.

    ps - I think it would be worthwhile having an advanced web forum on your site - you must have the audience for it by now. Notes.net has lost the plot full of people who want to know how to launch the designer client or how to make there lotusscript work in netscape. - The same people that are nicking our jobs with their 3 month work visas!!!

    steve

    1. Re: Modal Windows

      At last, somebody else who sees this the same way I do. Three weeks out of work and I'm already the profit of gloom. Won't be long now before I am going to have to charge a yearly subscription to this site ;( Especially if I have to monitor a forum as well.

      Anything you can knock together by way of an example of this would be great Steve. I don't mind glueing it all together in to an article myself. You get all credit though, of course.

      Cheers, Jake

      Show the rest of this thread

      • avatar
      • Val
      • Wed 31 Oct 2001

      Re: Modal Windows

      Steve:

      I would like to see an example if possible. I like the idea of the advanced section on Codestore. Notes.net is too cluttered !

      Jake:

      While I'm here...Like the new site design. Keep up the good work !

      Cheers,

      Val.

  2. Good luck Jake

    Good luck with your job hunt. I don't mind paying a fee to access your site. You are putting in a lot of work and should be rewarded. My company does subscribe to the Domino Advisor magazine, when compared to the quality of articles your write and the value addition to articles by users. I know where I will put my money next time.

    1. I'm on board

      Agreed. The information contained within is advanced information. We can go to Notes.net for the small stuff.

      I would suggest a low-cost subscription to start (US$10 - $20 annually? quarterly?) so you can measure potential subscribers. In all honesty, speaking as a small business person myself, I would subscribe to Jake's site before I thought about subscribing to "The View" or "Advisor" (which I do not). I support those who have put their blood, sweat, and tears into something.

      • avatar
      • Steve Smillie
      • Thu 1 Nov 2001

      Subscription Fees

      I would have no problem paying for this site. This site has been a great resource for solving Domino Web Dev problems.

      It is amazing that almost everytime a new article is published, it has a solution to a problem on one of the projects we are currently working on. Jake you have had great timing! :)

      These articles are very usable suggestions for real world Domino Tasks (unlike many other sites whose solutions or suggestions are not feasible in the real world)

      • avatar
      • Ant
      • Tue 20 Nov 2001

      Re: Good luck Jake

      Dear jake,

      Think your site is very good. The stuff you develop is excellent. This is a long message but i do visit regulary, so i hope it helps.

      Personally, i think you should put some sort of open source licence on some of your work. For instance your search box work is good and the db for designing modular domino apps. is first class, very elegant.

      Otherwise you will have people, who will rip you off. And there will come a day when you see others profit from your work and you will have nothing for it, not even a thank you. In fact i recently saw a domino web site that had the look of the old code store.(not the content) Thats not so bad, "imatation is etc..." But its those tools & templates you have developed that do have value and will be used commercially, and it wont be long before you come across a web site powered by your work.

      Subscription is certanly a solution to it, but personally as an individual i wouldnt subscribe. I am a tightwad :) Its somthing companies would probably buy though. Think of the cost of Advisor, its very expensive and a lot of it is irrelevant or impractical and done by people who write about dev rather than do it. Some of it is good. Plus its website is naff. As for other sources of income what about an ad at the top of the page, you have the space, everybody else has them, why not. In fact i like them. Apparantly the best ecommerce site have sevral income sources.

      A few other things. I see your using domino to blog, that would be a nice application to do? But tricky, as ideally it would use a browser to edit it but a notes client would do.

      You could do with a feedback/comment link for each blog entry. Like they have on live journal.

      Finally, as for the new look. I think your dad is right you need a bit more color. Plus its not clear to newbies how much stuff you have on you site if you had a count of how many in each category etc.. and at the top of each category page a page number indicator eg. 1,2,3

  3. Subscription to CodeStore

    I know how much Codestore has done to help me create Domino sites that look cool. I think that it is right that Jake is rewarded for all the work put into this site.

    As far as I am concerned it is the most valuable Domino resource on the web.

    I suggest £20 annual subscription. This will help towards getting a dedicated server, as well as getting a fast link i.e. ADSL, ISDN and also reward Jake for his continuous effort.

    Thank you Jake for making my transition to web development a very smooth one.

    Regards, Peter.

    1. Re: Subscription to CodeStore

      Hi there Jake,

      As a former colleague and current friend I would have no hesitation in paying a subscription fee to CodeStore.

      Although an X "Domino" developer ;-(, I find the articles posted provide me with a current feel for general i*net development. This in turn is useful for arguing the toss with other developers about what is possible and ?doable?. Using the line, ?well you can do it in Domino? has an amazing effect on people who believe (incorrectly) that it is an inferior product.

      Keep up the good work and seeya in town for drink soon.

      Cheers, PK

      Show the rest of this thread

    2. Re: Subscription to CodeStore

      I wouldn't mind paying a fee for all that nice info you've made available.

      If you do charge, I would like to be able to replicate the DB at the office, just like we can do with the sandbox.

      I used to be a freelancer, but with 2 kids and a wife at home, the market here in quebec Canada is way too slow for me to continue on that road. I know exactly what you're going through and I wish you the best of luck.

      Keep up the good work !

  4. Another way to make the modal with dynamic content

    Just wanted to let you know of a way to make modal dialogs with dynamic content. I happen to be working on a project right now where I wanted to do this very thing. All you have to do is have the modal dialog call a frameset, where there are two frames. I made the first one a 0px tall frame and the second is the actual form that I wanted to load. In my dialog I have a search field to show the entries of an embedded view with a single catagory. I also can change to different forms using a tabular function that I created at the top to provide more options.

  5. Subscription fee

    Hi Jake,

    I'd support you and your site should you decide to move to a subscription model. You put a great deal of effort into it and you've helped me out tremendously since I first came across your site a year or so ago. It's my destination of choice when I need to dig up useful, well-documented examples of how to make Domino do something on the Web (and obviously elsewhere).

    I have to second Stan Rogers' woes regarding the Loonie, but rest assured, your site is worth it.

    Regards, Bruce

    1. Re: Subscription fee

      I have no problem paying for this site. Who do I make a check too and what's the address I can mail it too?

      Jack

      Show the rest of this thread

  6. Modal Box Refresh Problem

    That example was great. Thanks.

    I am using the modal dialog to display a dropdown with info from a DBColumn. When the documents in the DBColumn are updated on my site, the Modal dialog does not refresh on a machine once it has been opened once on the site. The only solution I found was to delete temporoary internet files. Obviously not a good solution. Anyone have any better ideas?

    -Jeff

      • avatar
      • Stone
      • Mon 16 Jun 2003

      Re: Modal Box Refresh Problem

      hi,I met the same problem as you,

      just add <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

      in the page which should be shown in the modal dialog.

      that's works fine

      Show the rest of this thread

    1. Re: Modal Box Refresh Problem

      I have a Modal Dialog in which i have a datagrid..I have a button which adds row in the grid.when i click that row is not displayed but when i close the box and open it the row is added..

      how i solve it..i used the meta tag pragma method but it doesnt worked..any other solutions would be greatly appreciated

    2. Re: Modal Box Refresh Problem

      Stone I cannot thank you enough

      You saved me after hours of googling for solution I found yours like

      the lifeboat for the drowned

      thanks ,very much

  7. floating centered windowpane

    hi is it possible to center the floating window?

    gr, Patrick

  8. Double Login

    Hi,

    I have an application that has upto three layers of window. When users click on the icon that opens up the thrid window they are sometime prompted to login. This happens even when I have just logged into the application(IE 5.5 sp2 and above).

    The scenario is : In my application the users click on a link to compose a form. Then within the form they select an activity type from the drop-down. When the activity is selected the interface for the activity is displayed in a modal window. In this modal window there is a icon to launch the address book. When users click on the address book icon a pop-up window opens that requires them to logon in again before they can see the address book.

    Has someone ever encountered such a problem. Any help or suggestion is appreciated.

    Regards, Archana

    • avatar
    • anonymous
    • Thu 9 Oct 2003

    use DHTML for cross-browser modal popup

    initial idea:

    in the css:

    .popup { visibility:hidden; position:absolute; left:40%; top:50%; width:400px; height:200px; margin-left:-50px; margin-top:-50px; background-color:#99CCFF; }

    of course, the width, heigth etc. would be best calculated dynamically to cover other input.

    in the javascript:

    function hide(){ document.getElementById("pop1").style.visibility="hidden"; }

    in the xhtml:

    <div class="popup" id="pop1"> Popup stuff goes here. <form> <div> <input type="button" onclick=hide()> </div> </form> </div>

    1. Re: use DHTML for cross-browser modal popup

      Hey, I'm not sure how is this code suppose to work? Any idea? I would like to have a DHTML pop-up window modal. Basicly what I want to do is have a DHMTL window that opens within the current browser window, without opening a new browser window.

    • avatar
    • sandeep
    • Wed 28 Apr 2004

    Making a popup window

    This article was really helpful. Thanks for such good stufff. keep up the great job..!!!

    1. Re: Making a popup window

      so could pop up window interact with the jsp.. I mean that using the request getParameter. For example if user clikc the choose it will pass back the data to the parent window..??

      Show the rest of this thread

  9. PostBack

    If you add:

    <base target="_self">

    to the <HEAD> tag of your page, you can post back to yourself and IE no longer has a problem.

  10. Query about showModalDialog

    I have a parent form which opens a child window using showModalDialog box. when i press close button on child window, it gives error on some I.E. browsers. i have written following code on close button. it is giving __eventTarget is not a null or an object.

    function closePopup(formName, eventTarget) { if (formName != null && eventTarget != null) { var da = window.dialogArguments; var theform; theform = da.document.forms[formName]; theform.__eventTarget.value = eventTarget; theform.__eventArguments.value = "frompopup"; theform.submit(); } window.close(); }

    Basically on some browsers theform variable is giving output as undefined. i could not resolve this problem.

    If anyone knows the solution, please reply it to me

    Thanks

      • avatar
      • mac
      • Mon 29 Aug 2005

      Re: Query about showModalDialog

      Thats because, showModalDialog is IE specific function. u cannot use it with other browsers like Firefox , netscape, etc. you might want to check if the browser supports showModalDialog with somethign like this : if (window.showModalDialog) { var rValue = window.showModalDialog("popup.asp","dialogHeight:500px;center:yes;status:no"); } else { somethign else for other browsers }

    • avatar
    • nas
    • Sun 26 Jun 2005

    from Modal Window , window.open not working

    Hi,

    From child Modal Window , i am trying to open new url , but nothing happens. example--> on click of button window.open("abc.xls", "tinyWindow2")

    also i tried location.href , but no use.

    sometimes it works in different machine.

    i dont know wot exactly the problem.

    regards nas

      • avatar
      • Jake Howlett
      • Mon 27 Jun 2005

      Re: from Modal Window , window.open not working

      The page that loads in the modal window is fixed. You can't submit forms from it or redirect it elsewhere. It can only show the page you opened it with (if I remember right).

      Show the rest of this thread

    • avatar
    • Lee
    • Mon 4 Jul 2005

    IE 6

    XP Home, IE6, SP2, lastest version at data of post: your "Choose colour" bit creates a JS error, "undefined is not..."

      • avatar
      • Jake Howlett
      • Mon 4 Jul 2005

      Re: IE 6

      Thanks Lee. Fixed now.

      My recent design overhaul of this site means there's no longer the default Domino form in the articles. I have to include them in the actual content if I want to use a sample form.

      Anyway, thanks.

      Jake

  11. Dialogue data is a form post result

    Ugh, this was just what i needed to understand Modal windows in IE, but in my specific case, the content of the popup is the result of a form posted from the main window.

    Before, i just opened an empty popup, named the same as my form target, and them submitted the form into the popup.

    Is something like that possible here?

  12. query regarding modal windows

    hi can any one tell me how can i open a modal window without border. Regards, Sachin

      • avatar
      • Jake
      • Fri 23 Dec 2005

      Re: query regarding modal windows

      add "unadorned:yes" to the list of arguments you send the function.

    1. Re: query regarding modal windows

      hey I have a modal window in IE same as yuor using showmodaldialog() but from the popUp I invoke my java code which in turn gernerates PDF using IText API . Now the problem is that after making the popup window modal , i get another blank window opened from the modal dialog window that I have created, this doesn't happen if I simply use window.open() to create the PopuP window, PLease Help?

    • avatar
    • Chris
    • Tue 27 Dec 2005

    sendAndClose

    For some reason, when I call javascript:sendAndClose("") from the modal dialog the browser tries to open it in another window instead of calling it within the dialog. Any ideas why and how to fix it?

    • avatar
    • Teg
    • Fri 13 Jan 2006

    Refreshing a modal parent while modal is open.

    Hello,

    One question:

    If I have a modal dialog, and want to cause its parent to reload, while it is still active, is there any way to do this?

    I can do it with fake (JS focus) dialogs, but not with real modals. The problem seems to be that the modal dialog cannot access 'opener.location'.

    Thanks,

    - Teg

    1. Re: Refreshing a modal parent while modal is open.

      hi you can access window.opener by putting following code in the modal window

      if (window.dialogArguments) { window.opener = window.dialogArguments; }

      now you can do any thing with this window.opener object..

      Hope this helps you

      Regards, Vishal S.

      Show the rest of this thread

    2. Re: Refreshing a modal parent while modal is open.

      How to take reference the parent window from modal popup window?

    • avatar
    • Luke
    • Tue 31 Jan 2006

    Allowing postback in IE modal window

    To allow your Modal window to postback to the server for information, place this on the page that acts as the modal window. <base target="_self">

    • avatar
    • dave
    • Thu 27 Apr 2006

    Passing text values:

    this function works great...my question is: how would you pass text to the parent doc, instead of the dialog list selections? if selObj2 is text?

    function sendAndClose( selObj1, selObj2) { window.dialogArguments.myColour1 = selObj1.options[selObj1.value].text

    window.dialogArguments.myColour = selObj2???

  13. does it work for FF

    i wanted to confirm, if it works for mozilla and FF?

    1. Re: does it work for FF

      No, it is JScript rather than JavaScript. But the div approach discussed above is cross-browser.

      Show the rest of this thread

  14. Reg Popup window

    How to get the value from popup window and place the value appropriately in the table format of the parent window aspx file , Here Data will be presented in the table format not in the DataGrid format

    • avatar
    • Nizha J
    • Fri 6 Apr 2007

    Thanks

    Hai... this page is really good.. it explained exacty the working of show modal dialog..

  15. Passing VALUE instead of LABEL

    The script works great. But what if I need to pass the VALUE (<value> tag) instead of the LABEL (<option>tag)? Thanks for your help!

    • avatar
    • Hussein
    • Mon 29 Dec 2008

    MODAL WINDOW EXAMPLE DOES NOT WORK

    I can re-focus on parent window.

    What the hell?

      • avatar
      • AMK
      • Sat 27 Mar 2010

      Use IE. Doesn't necessarily work with all other browsers (doesn't work with google).

    • avatar
    • Harshada
    • Wed 5 May 2010

    Hi

    I am using a modal window. After clicking on submit button on this window i want to show the same window itself with updated data.

    I am using <base target="_self"> in the head part for the same. However since target tar is deprecated i need to use something else...any solutions?

    • avatar
    • prashant
    • Tue 8 Jun 2010

    Hi,

    I have a question. I want to open a modal window of an external site say yahoo.com or google.com

    Once the modal window is closed I want to access the data in the model window.

    Can you please let me know as to how to do this?

    Thanks

    Prashant

    • avatar
    • SKB
    • Mon 21 Jun 2010

    This is indeed very helpful information.

    Thank you Jake and Steve!!!

    Prashant: Your requirement is not clear.

    Assuming your requirement is to pass some data (fetched/calculated in the modal window) back to the parent window, you can either do any of the following:

    In the Modal window:

    -----------------------

    1. window.dialogArguments.<variable of the argument received> = <data you want to pass>

    OR

    2. window.returnValue=<data you want to pass>;

    In the Parent window:

    -----------------------

    case-1.

    -------

    <parameter passed to modal window>.<variable set in the modal-window>

    example: myColourDialog.myColour

    case-2

    --------

    The value returned by the modal window is assigned to any variable which is specified while opening the window.

    example: var returnValue = window.showModalDialog(....);

    returnValue will be assigned the value returned by modal window.

  16. WbxuMk Hi! I'm just wondering if i can get in touch with you, since you have amazing content, and i'm thinking of running a couple co- projects! email me pls

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Using the if statement effectively   Checking for attachments in JavaScript

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: dialog; modal; window; pop-up;

Attachments

simple.html (1 Kbytes)
new_window.htm (2 Kbytes)

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »