Jump to content


Photo

Modal windows

pop-up windows rwd html5 css javascript lightbox

  • Please log in to reply
9 replies to this topic

#1 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,593 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 19 February 2017 - 09:15 PM

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, 19 February 2017 - 09:15 PM.


#2 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 315 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 09 April 2017 - 11:50 AM

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, 09 April 2017 - 02:17 PM.


#3 webdesigner93

webdesigner93

    Web Guru

  • Moderators
  • PipPipPipPipPip
  • 2,878 posts
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Web Developer

Posted 09 April 2017 - 05:31 PM

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. 



#4 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,593 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 13 April 2017 - 09:23 AM

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.

 

@webdesigner93

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



#5 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,013 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 13 April 2017 - 11:01 AM

 

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/r...mith/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, 13 April 2017 - 11:02 AM.


#6 webdesigner93

webdesigner93

    Web Guru

  • Moderators
  • PipPipPipPipPip
  • 2,878 posts
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Web Developer

Posted 13 April 2017 - 06:30 PM

 

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/r...mith/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, 13 April 2017 - 06:30 PM.


#7 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,013 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 14 April 2017 - 10:09 AM

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



#8 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 315 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 14 April 2017 - 11:32 AM

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



#9 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,593 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 14 April 2017 - 04:06 PM

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.gith...o/featherlight/



#10 Grant Barker

Grant Barker

    Advanced Member

  • Members
  • PipPipPip
  • 315 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 15 April 2017 - 02:11 AM

@Nillervision Thanks. I'll check it out.







Also tagged with one or more of these keywords: pop-up windows, rwd, html5, css, javascript, lightbox

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users