Web Modals and IE 9
Developing for Internet Explorer 9 poses some challenges, but the solutions are simple when broken down to serve the users most basic needs.
This week we developed modals for the grundfos.com front page. The “Join Us” modal above is for the careers section of the Grundfos page and meant to connect those interested in working for Grundfos to open positions.
The best option for developing this modal is to use a combination of position-absolute, z-index and media query’s for screen widths.
The modal can be broken into two media sizes for responsiveness. The one above is set to a min width of 768px and meant for both tablets and desktops. If the screen is smaller than 768px, the user receives the mobile modal at 375px wide.
Since the widths are responsive only for these two sizes, everything can be coded as position: absolute, meaning all the content is positioned with hard-coded margins and padding. This positions everything pixel-perfect, but would not work if the screen size compressed the image, which is why the media query will immediately serve the mobile-width modal if the screen becomes 1px smaller than the desktop modal.
Here’s where things get interesting. We are trying to minimize versioning with web content, which means a separate modal for each country/language. Instead, we are pushing towards dynamic content where the text and links (content) changes dynamically based on some user settings (language). This means using Javascript to append content, rather than having different static html markup for each language.
Developing dynamic functionality for IE 9 with Javascript is super fun because any ES6 functionality is off-the-table/ illegal/a dream. So back-tick “template literals” will not work properly. Instead, we have to use the array and join method. The other solution would be to use a tool like Babel, but this may not always work right. If the functionality is broken down to it’s basic requirements, it’s more simple to just use the older JS methods in this case because the content is minimal.
