Home > Blogs > JavaScript Modal Dialog Box in a Frameset Environment

JavaScript Modal Dialog Box in a Frameset Environment

Only a few modifications are needed to adapt the solution I've described in the Building Modal Dialogs into Your Web Application to a frameset environment.

The JavaScript code described in the article has to be changed in two places:

  • The modalCanvas object that grays out the contents of the current window has to be created in all frames within the frameset to stop the mouse interactions in the whole browser window;
  • You might also want to change the code that centers the modal dialog box to take in account the position of the current frame within the frameset.

The first part is quite easy to achieve: replace the following code from the original solution ...

var canvas = xGetElementById("modalCanvas");
if (!canvas) canvas = xAddElement("DIV",document.body,

... with this one:

for (var i = 0; i < window.top.frames.length; i++) {
  var curFrame = window.top.frames[i];
  var canvas = curFrame.document.getElementById("modalCanvas");
  if (!canvas) canvas = xAddElement)("DIV",curFrame.document.body,