CODEWITHSUNDEEP
html
Shawn
Shawn

Reputation: 11

How to implement a modal pop up window from a div

I'm a novice web designer and I am trying to design a pop up div contact for/box. I've been researching for an entire week, longer really, on how to create a pop up div with a modal layer. My website hosting doesn't allow for in-depth HTML, CSS and JS customization, so while I've discovered what appeared to be good plugins/templates, I can't really use them because of my limited access. (At least, they didn't work when I did try to use some of them.) All I can really customize is the section of my webpages and then I can add HTML snippets to the page. Everything else I have to jimmy-rig into these two areas; very limiting as you imagine.

I finally found some code I could use though, and after learning some CSS and javascript, I was able to successfully create my pop up div contact form/box. I figured out that I had to put the CSS and JS in the section and then add the simple div for pop up modal purposes to the page via the HTML tool from my host's website building application.

But there are issues. I discovered the code I discovered and adapted to my site isn't that great. There something going on with the formatting that prevents the modal opacity layer from being the correct size (and I have tried everything I could think of to fix it, but to no avail). Also, the way my pop up div is centered just doesn't seem 100% right. It "functions", but I want it to function appropriately. The other issue is compatibility between browsers. I've been designing my website and checking my progress in Chrome, and it works fine. But it gets mangled on IE8 and Firefox.

Well, after this very short glimpse at success, I started researching for a final solution. Using Chrome's developer tools, I was able to track down various elements of functioning modal popups on websites other than my own and stumbled upon SimpleModal, which happens to be the nifty little modal popup tool that my web hosting company uses. However, I've been unable to install it correctly using the demo code of SimpleModal.

SO COULD SOMEONE PLEASE TELL ME HOW TO INSTALL SIMPLEMODAL? And if necessary, I can post the code from my website in a comment (as much as I can fit at a time at least; there seems to be a limit...) and someone can see firsthand my troubles if that helps?....THANKS!

MY WEBSITE: http://solitairethahalo.com/

Upvotes: 0

Views: 996

Answers (1)

Khallil Mangalji
Khallil Mangalji

Reputation: 481

You should look deeper into the inability to use Javascript. Which host are you using?

If you do find that you are able to use js, then, instead of going around, getting plugins from everywhere, and creating a mess in your DOM, you should start your projects using a boilerplate.

Check out http://www.initializr.com/ and use the bootstrap option. This will set you up with LESS stylesheets and incorporate Twitter Bootstrap which will do exactly what you want with your modal.

Once you have your page setup, using bootstrap you should be able to turn any div into a modal in your script.js file by calling the modal method on it (from bootstrap)

$('#myModal').modal(options)

You can find the bootstrap documentation here http://twitter.github.com/bootstrap

hope it helps!

Upvotes: 1

Related Questions