Jump to content

Recommended Posts

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 by Nillervision

Share this post


Link to post
Share on other sites

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 :blush1:, 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 by Grant Barker

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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 by rbrtsmith

Share this post


Link to post
Share on other sites

 

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 by webdesigner93

Share this post


Link to post
Share on other sites

@@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.)

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By colinbrazier
      Hi everyone,
      My dropdown multi-level menu at www.fobgfc.org doesn't work with touch devices.  It doesn't drop down at all.  Basically because it makes use of :hover.
      I'd like the functionality to behave like the menu on www.chipsteadfc.org.uk
      I will consider using jQuery.  
      How's best to do this please?
      Cheers,
          Col
    • By Seth
      Hey
      I can't find the CSS style to style this button. You can find it on https://ashleyassists.mystagingwebsite.com/social-media/

    • By GrahamUK33
      I recently came across the perfecting feature:
      <link rel="dns-prefetch" href="//google-analytics.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> My take on this is that the above example would force Google Analytics to load up last, but does this really help?
      Where in the headers would the Prefetching need to go to be of some use?
    • By RobDoyle
      I am curious as to the difference between the two and when one should be used over the other. Thanks.
    • By Dragonknigh
      I'm trying to create this site and this is the code I have right now. How do I make a container and place it just like on the "this site"? How do I insert an image instead of  "go to site" button? And make it all responsive just like on "this site"?
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,724
    • Most Online
      4,970

    Newest Member
    lomawheels81
    Joined
  • Forum Statistics

    • Total Topics
      65,787
    • Total Posts
      454,658
×