 javascript modal tool ctools provides a simple modal that can be used as a popup to place forms it differs from the normal modal frameworks in that it does not do its work via an iframe this is both an advantage and a disadvantage the iframe simply renders normal pages in a subbrowser and they can do their thing that makes it much easier to put arbitrary pages and forms in a modal however the iframe is not very good at actually communicating changes to the main page so you cannot open the modal have it do some work and then modify the page invoking the modal the basic form of the modal can be set up just by including the javascript and adding the proper class to a link or form that will open the modal to include the proper javascript simply include the library and call the addjs function ctoolsinclude modal ctoolsmodaladdjs you can have links and buttons bound to use the modal by adding the class ctoolsusemodal for convenience there is a helper function to try and do this though it s not great at doing all links so using this is optional render an image as a button link this will automatically apply an ajax class to the link and add the appropriate javascript to make this happen param image the path to an image to use that will be sent to theme image for rendering param dest the destination of the link param alt the alt text of the link param class any class to apply to the link todo this should be a options array function ctoolsmodalimagebutton image dest alt class return ctoolsajaxtextbutton theme image image dest alt class ctoolsusemodal render text as a link this will automatically apply an ajax class to the link and add the appropriate javascript to make this happen note html true so be sure any text is vetted chances are these kinds of buttons will not use user input so this is a very minor concern param image the path to an image to use that will be sent to theme image for rendering param dest the destination of the link param alt the alt text of the link param class any class to apply to the link todo this should be a options array function ctoolsmodaltextbutton text dest alt class return ctoolsajaxtextbutton text dest alt class ctoolsusemodal like with all ctools ajax functionality the href of the link will be the destination with any appearance of nojs converted to ajax for submit buttons however the url may be found a different slightly more complex way if you do not wish to simply submit the form to the modal you can create a url using hidden form fields the id of the item is taken and url is appended to it to derive a class name then all form elements that contain that class name are founded and their values put together to form a url for example let s say you have an add button and it has a select form item that tells your system what widget it is adding if the id of the add button is editadd you would place a hidden input with the base of your url in the form and give it a class of editaddurl you would then add editaddurl as a class to the select widget allowing you to convert this value to the form without posting if no url is found the action of the form will be used and the entire form posted to it customizing the modal if you do not wish to use the default modal the modal can be customized by creating an array of data to define a customized modal to do this you add an array of info to the javascript settings to define the customizations for the modal and add an additional class to your modal link or button to tell it which modal to use first you need to create a settings array you can do this most easily with a bit of php drupaladdjs array mymodalstyle array modalsize array type fixed width 250 height 250 setting the key to the array above in this case mymodalstyle is the identifier to your modal theme you can have multiple modal themes on a page so be sure to use an id that will not collide with some other module s use using your module or theme as a prefix is a good idea then when adding the ctoolsusemodal class to your link or button also add the following class ctoolsmodalid in the example case that would be ctoolsmodalmymodalstyle modalsize can be fixed or scale if fixed it will be a raw pixel value if scale it will be a percentage of the screen you can set  modalsize  an array of data to control the sizing of the modal it can contain  type  either fixed or scale  if fixed the modal will always be a fixed size if scale the modal will scale to a percentage of the browser window default scale  width  if fixed the width in pixels if scale the percentage of the screen expressed as a number less than zero for 80 percent use 8 for example  default 8 height  if fixed the height in pixels if scale the percentage of the screen expressed as a number less than zero for 80 percent use 8 for example  default 8 addwidth  any additional width to add to the modal in pixels only useful if the type is scale default 0 addheight  any additional height to add to the modal in pixels only useful if the type is scale default 0 contentright  the number of pixels to remove from the content inside the modal to make room for scroll bar and decorations default 25 contentbottom  the number of pixels to remove from the content inside the modal to make room for scroll bar and decorations default 45 modaltheme  the drupal javascript themable function which controls how the modal will be rendered this function must be in the drupalthemeprototype namespace if you set this value you must include a corresponding function in a javascript file and use drupaladdjs to add that file default ctoolsmodaldialog drupalthemeprototypectoolsmodaldialog function var html html div id ctoolsmodal html div class ctoolsmodalcontent panelsmodalcontent html div class modalheader html a class close href html drupalctoolsmodalcurrentsettingsclosetext drupalctoolsmodalcurrentsettingscloseimage html a html span id modaltitle class modaltitle span html div html div id modalcontent class modalcontent html div html div html div return html  throbbertheme  the drupal javascript themable function which controls how the modal throbber will be rendered this function must be in the drupalthemeprototype namespace if you set this value you must include a corresponding function in a javascript file and use drupaladdjs to add that file default ctoolsmodalthrobber drupalthemeprototypectoolsmodalthrobber function var html html div id modalthrobber html div class modalthrobberwrapper html drupalctoolsmodalcurrentsettingsthrobber html div html div return html  modaloptions  the options object that s sent to drupalctoolsmodalmodalcontent can contain any css settings that will be applied to the modal backdrop in particular settings such as opacity and background  default array opacity 55 background fff  animation  controls how the modal is animated when it is first drawn either show   fadein or slidedown  default show animationspeed  the speed of the animation expressed either as a word jquery understands slow medium or fast or a number of milliseconds for the animation to run defaults fast closetext  the text to display for the close button be sure to wrap this in t for translatability default t close window  closeimage  the image to use for the close button of the modal default theme image ctoolsimagepath iconclosewindowpng t close window t close window  loadingtext  the text to display for the modal title during loading along with the throbber be sure to wrap this in t for translatability default t close window  throbber  the html to display for the throbber image you can use this instead of ctoolsmodalthrobber theme if you just want to change the image but not the throbber html default theme image ctoolsimagepath throbbergif t loading t loading  rendering within the modal to render your data inside the modal you need to provide a page callback in your module that responds more or less like a normal page in order to handle degradability it s nice to allow your page to work both inside and outside of the modal so that users whose javascript is turned off can still use your page there are two ways to accomplish this first you can embed nojs as a portion of the url and then watch to see if that turns into ajax when the link is clicked second if you do not wish to modify the urls you can check post js or post ctoolsjs to see if that flag was set the url method is the most flexible because it is easy to send the two links along completely different paths if necessary and it is also much easier to manually test your module s output by manually visiting the nojs url it s actually quite difficult to do this if you have to set post js to test in your hookmenu you can use the a ctools ajax convenience loader to help items ctoolsajaxsample ctoolsjs login array title login page callback ctoolsajaxsamplelogin page arguments array 1 access callback true type menucallback the first argument to the page callback will be the result of ctoolsjsload which will return true if ajax was the string and false if anything else ie nojs is the string which means you can then declare your function like this function ctoolsajaxsamplelogin js if js react with the modal else react without the modal if your modal does not include a form rendering the output you wish to give the user is just a matter of calling the modal renderer with your data function ctoolsajaxhelloworld js title t greetings output p t hello world p if js ctoolsmodalrender title output else drupalsettitle title return output if you need to do more than just render your modal you can use a ctools commands array see the function ctoolsmodalrender for more information on what you need to do here if you are displaying a form and the vast majority of modals display forms then you need to do just slightly more fortunately there is the ctoolsmodalformwrapper function ctoolsinclude modal ctoolsinclude ajax formstate array title t title of my form ajax js output ctoolsmodalformwrapper myform formstate there are some possible states after calling the form wrapper 1 we are not using js and there is form output to be rendered 2 we are using js and the form was successfully submitted and we need to dismiss the modal most other states are handled automatically unless you set flags in formstate to avoid handling them so we only deal with those two states if empty output js commands array commands ctoolsmodalcommanddismiss t login success in typical usage you will do something else here such as update a div with html or redirect the page based upon the results of the modal form ctoolsajaxrender commands otherwise just return the output return output you can also use ctools form wizard inside the modal you do not need to do much special beyond setting formstate modal true in the wizard form it already knows how to handle the rest  