Everybody who tried opening a bootstrap modal over the entire entity form in CRM knows that it is far from easy. The reason this is a real challenge is the fact that in order to add a div element for the modal itself together with its content, we need to add a web resource which will be added to the CRM form as an iframe. Iframes behave as web pages inside of another web page, and CRM forms are full of those. What this means is that once having the bootstrap modal inside of the iframe, using a simple logic of showing it will bring the modal over the iframe ONLY, not the entire CRM form. In this blog post I will explain what steps need to be taken to display modal on a CRM form as we would display it under normal circumstances (non-iframe situation), so let’s get started.

The first thing to do is create the html document and add it to the CRM form as an iframe (webresource). The html document will contain a div that represents the actual modal, just like this:

modalContentAfter we have our modal div ready we can start writing the function that will be called once the iframe has been loaded. So I added a javascript function which I named appendModal and call that very same function on load of the iframe.

The function does the following:

  • Creates references to bootstrap.css, jquery and bootstrap.js
  • Appends those references to CRM window (highest parent in the html tree)
  • Appends modal and div used for fading effect to the window

Here’s a snippet of what the function looks like:

appendModal

In order to access the outer most parent we need to go back 3 parents in the hierarchy and using that accessor we will manipulate the modal. Setting the modals z-index to 1500 does the trick of showing it on top of all the other elements. Appending the modal to the outer most parent causes bootstrap css to be slightly changed, and that is why we need another div that will play the role of fading the background (#fading div). For the button close same thing happens, there is a lot of padding that needs to be clear out before it appears normally on the window. What we are doing here really is accessing the global DOM and playing with it, that’s why css and z-index of our elements appended need to be modified too.

Finally, we need these two lines in order to show the modal (we can add them on any event):

$(globalDocument.getElementById(“myModal”)).show();

$(globalDocument.getElementById(“fading”)).show();

Possible issues:

  • If appendModal function is located inside the iframe make sure to have references to bootstrap css, jquery and bootstrap.js in the head of the iframe.
  • If CRM form already doesn’t have jquery include it on the form onload event

If you followed all the steps you should see the modal like this

screenshotModal

The modal content and all the elements inside can then of course be reached using the globalDocument.getElementById (or any other selector method) or via jQuery after making globalDocument variable to be jQuery object – $(globalDocument)