IT-шные заметки: Application Express: использование всплывающих модальных окон из фреймворка jQuery

Варианты реализации:

Предлагаю два способа:

с использованием плагина SimpleModal;
с использованием стандартных диалоговых окон входящих в состав jQuery UI.

На мой взгляд второй вариант предпочтительнее, за счёт использования стандартного функционала Apex 4.0 (jQuery UI) и большей функциональности.

С использованием плагина SimpleModal

Загрузить плагин SimpleModal с сайта: http://www.ericmmartin.com/projects/simplemodal
Создаем две страницы в приложении (одна из которой открывается всплывающее модальное окно, вторая - собственно само содержимое всплывающего окна; в нашем случае страницы №1 и №2 соответственно)

На странице №1 в свойствах установить в закладке "HTML Header and Body Attribute" значение "HTML Header":

 <style type="text/css">  
 body {height:100%; margin:0;}  
 h3 {color:#5f87ae; font-size:1.6em; padding:0; margin:0;}  
 #basic-modal-content {display:none;}  
 /* Overlay */  
 #simplemodal-overlay {background-color:#000; cursor:wait;}  
 /* Container */  
 #simplemodal-container {height:320px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}  
 #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; margin-bottom:12px; padding:4px 6px 6px;}  
 #simplemodal-container a {color:#ddd;}  
 #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}  
 #simplemodal-container #basic-modal-content {padding:8px;}  
 </style>  
 <script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.4.js"></script>

здесь мы импортируем JavaScript-плагин SimpleModal на страницу, а так же CSS-стили для него:

На странице №1 в свойствах установить в закладке "JavaScript" значение "Function and Global Variable Declaration":

 function modalOpen(pageNumber){  
  var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +$v('pFlowId')+":"+pageNumber+":"+$v('pInstance')+":::::";  
  apex.jQuery.modal('<iframe src="' + newURL + '" height="100%" width="100%" style="border:0">', {  
  closeHTML:'',  
  containerCss:{  
   backgroundColor:"#fff",  
   borderColor:"#BDBDBD",  
   padding:0,  
   height:200,  
   width:200  
  },  
  overlayClose:false  
  });  
 }  
 function modalClose(){  
   apex.jQuery.modal.close();  
 }

На странице №1 создаём регион и добавляем туда кнопку по нажатие на которую будет открываться всплывающее модальное окно. Для этого в свойствах кнопки в закладке "Action When Button Clicked" установить значения полей:
Action: Redirect to URL
URL Target: javascript:modalOpen(2)
,где параметр функции есть номер страницы открываемой во всплывающем окне.
Запускаем страницу №1 и нажимаем на кнопку:

С использованием стандартных диалоговых окон входящих в состав jQuery UI

Создаем две страницы в приложении (одна из которой открывается всплывающее модальное окно, вторая - собственно само содержимое всплывающего окна; в нашем случае страницы №1 и №2 соответственно)

На странице №1 в свойствах установить в закладке "JavaScript" значение "Function and Global Variable Declaration":

 var modalDialog=null;  
 function modalOpen(pageNumber,windowTitle,windowWidth,windowHeight){  
  var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +$v('pFlowId')+":"+pageNumber+":"+$v('pInstance')+":::::";  
  modalDialog=apex.jQuery('<div></div>').html('<iframe src="' + newURL + '" height="100%" width="100%" style="border:0" frameborder="0">').dialog({autoOpen: false,modal: true,height: windowHeight,width: windowWidth,title: windowTitle});  
  modalDialog.dialog('open')  
 }  
 function modalClose(){  
  if (modalDialog!=null){  
   modalDialog.dialog('close');  
   modalDialog=null;  
  }  
 }

На странице №1 создаём регион и добавляем туда кнопку по нажатие на которую будет открываться всплывающее модальное окно. Для этого в свойствах кнопки в закладке "Action When Button Clicked" установить значения полей:
Action: Redirect to URL
URL Target: javascript:modalOpen(2,'Testing modal windows!!!',220,220)
,где первый параметр функции есть номер страницы открываемой во всплывающем окне, второй - наименование окна, третий - ширина окна, четвертый - высота окна.
Запускаем страницу №1 и нажимаем на кнопку: