Many devs resort to Bootstrap or other frameworks when it comes to modal / pop-up windows.

But it's not needed at all. If you would like to learn how to code your own responsive flexible modals, here is my approach.

 

It's been a year since I last had time to make a video tutorial and I got some great feedback from this forum then.

So besides the hope that it can be helpful to many people, I would also appreciate critique, ideas for alternative approaches etc. Thanks

 

Edited February 19, 20179 yr by Nillervision

Cool. I didn't know that you were a YouTuber. I need a good modal to replace lots and lots of images which I have opening up in a new browser tab , although I see you mentioned using Ajax for that. I would have watched this sooner, if I'd seen this thread.

 

I haven't tried NetBeans, either. I wonder if you and others here would recommend NetBeans over Dreamweaver for any reason..

 

(I found this thread searching for 'modals' here.)

Edited April 9, 20179 yr by Grant Barker

Many devs resort to Bootstrap or other frameworks when it comes to modal / pop-up windows.

But it's not needed at all. If you would like to learn how to code your own responsive flexible modals, here is my approach.

 

It's been a year since I last had time to make a video tutorial and I got some great feedback from this forum then.

So besides the hope that it can be helpful to many people, I would also appreciate critique, ideas for alternative approaches etc. Thanks

 

 

Personally I recommend using bootstrap for everything. It's just such a handy framework and takes a lot of work out of making a responsive site. But it is also good to understand how a modal is made without bootstrap which your video does perfectly.

Thanks so much for your comments guys

 

@@Grant Barker

Thanks. I don't really recommend any text-editor over another, It is a matter of preference. If DreamWeaver works for you thats fine.

 

@

Thanks for your comment. I don't agree with using Bootstrap for everything though.

 

Personally I recommend using bootstrap for everything. It's just such a handy framework and takes a lot of work out of making a responsive site. But it is also good to understand how a modal is made without bootstrap which your video does perfectly.

 

I wouldn't recommend Bootstrap at all unless you so happen to agree with all the design decisions. There are low level frameworks such as mine https://github.com/rbrtsmith/nebula-css and others that handle all the layout architecture (often better than Bootstrap) without any of the cosmetic styling and bloat. It also comes with jQuery and many projects are now not using that, either rolling with vanilla JS or a modern framework such as React.

 

If you are having to override styles to remove things then Bootstrap wasn't a wise choice and down the line you will end up with difficult to manage, brittle CSS.

 

Creating a modal window is really trivial, the only tricky part is making it play well with keyboard navigation, but again it's hardly rocket science, a basic understanding of JavaScript, the DOM and CSS is all you really need.

Edited April 13, 20179 yr by rbrtsmith

 

I wouldn't recommend Bootstrap at all unless you so happen to agree with all the design decisions. There are low level frameworks such as mine https://github.com/rbrtsmith/nebula-css and others that handle all the layout architecture (often better than Bootstrap) without any of the cosmetic styling and bloat. It also comes with jQuery and many projects are now not using that, either rolling with vanilla JS or a modern framework such as React.

 

If you are having to override styles to remove things then Bootstrap wasn't a wise choice and down the line you will end up with difficult to manage, brittle CSS.

 

Creating a modal window is really trivial, the only tricky part is making it play well with keyboard navigation, but again it's hardly rocket science, a basic understanding of JavaScript, the DOM and CSS is all you really need.

 

I've always used bootstrap and never ran into any issues but maybe it's not for everyone

Edited April 13, 20179 yr by webdesigner93

@@Grant Barker I would not recommend Dreamweaver or Netbeans for development, text editors like Atom, VS Code and IDE's like Web Storm are all much better choices for modern web development.

@@Grant Barker I would not recommend Dreamweaver or Netbeans for development, text editors like Atom, VS Code and IDE's like Web Storm are all much better choices for modern web development.

 

Thanks Robert. I wonder if you recommend any particular route for modal windows too, for my situation.

(I didn't want to take over a thread.)

I wouldn't worry so much about what text editor to use as long as it gets the job done, Also it's way off topic here

 

@@Grant Barker I took a look at your post and you said that you want to open images in the modal. So I think you're better of using a lightbox plugin that uses AJAX rather than links to hidden inline content.

Maybe you can give this a try: http://noelboss.github.io/featherlight/

@@Nillervision Thanks. I'll check it out.