popup forms and pages

[HarryDeBoer]

Hi,

I searched the forum for popups and read some posts about popping up panels via jqueryui. How do I popup Ebase Forms and Pages, any thoughts, examples?

Regards, Harry

[dvanhussel]

Hi,

Do you mean starting a second form from within a form as popup?

I have used Twitter bootstrap to do this (it can be done also with Jquery UI, I think)

For examples of Bootstrap see: http://getbootstrap.com/2.3.2/getting-s ... l#examples

Add bootstrap css and Javascipt and Jquery JavaScript to your page.

On the 'host'-page add this to the button onclick event:

Code: Select all

//populate the modal with an iframe, setting paramaters for form  
populateModal();   

$('#modifyModal').modal({
	keyboard: false,
	backdrop: 'static' 
});

in a client script:

Code: Select all

function populateModal(){
  // create an iframe with ID = modalFrameId in the dialog window, then open the dialog   $&#40;"#modifyModal .modal-body"&#41;.html&#40;'<iframe id="modalIframeId" width="100%" height="600" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" />'&#41;;
   // locate the iFrame and set the iFrame source to be the Xi form to run. Add in the form parameter by locating the value of the hidden form field contained in the panel that was clicked.
   $&#40;"#modalIframeId"&#41;.attr&#40;"src","/ufs/ufsmain?formid=FORMID&PARAMETER=Test"&#41;;
&#125;
window.closeModal = function&#40;&#41;&#123;
    $&#40;'#modifyModal'&#41;.modal&#40;'hide'&#41;;
&#125;;

where 'FORMID&PARAMETER=Test' should be replaced with the name and url parameters of the form you want to popup.

add this HTML at the bottom of your form:

Code: Select all

<div id="modifyModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Caption</h3>
  </div>
  <div class="modal-body">
   </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Hope this helps!