5 ms·

Yeah something's not right. A modal is a line of code, not 27 files. The most extensible modal could be a single file component. Just starting fresh, what is a

Yeah something's not right. A modal is a line of code, not 27 files. The most extensible modal could be a single file component. Just starting fresh, what is a modal? It's a widget (we could use a div) which when activated is moved to the front of the z axis and steals focus. CSS can do that. Now all you need it do is keep attributes regarding the text of the modal and state representing whether it's activated (we can juse a regular JS object for both), and you've got a working modal. Some of the frameworks are needlessly complex, which is frustrating, because it's hiding something very basic.

thunderbong 9y ago
I agree with the GP with regard to Angular4. But have you really tried to create a modal in HTML/CSS/JS without any framework? It's surely not one line of code!
- aaron-lebo 9y ago
  OK, so it's a dozen. https://stackoverflow.com/questions/25920941/how-do-i-overlay-a-popup-view-in-mithril-js https://stackoverflow.com/questions/25920941/how-do-i-overla... Didn't say not to use a framework. Use it and some CSS and that's a basic task, not to mention there are other libraries which do it for you already.
  - onion2k 9y ago
    Does that work in several versions of different rendering engines that date back a decade, at resolutions from 800x600 to an iMac 5K screen? How about on tablet and mobile devices? What happens when the user's scroll position is half way down the page? Does it listen for events to update or close itself? A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. If you have a simpler use case then you don't need all that extra edge case handling, but that doesn't mean it's not pointless code.
    - aaron-lebo 9y ago
      What's the likelihood that he's supporting engines going back a decade? Modern rendering engines and CSS handle that pretty well. IE 8 is 8 years old. Bootstrap 3 supports IE 8 and has modals. Point being, you can either write up a simple modal if you are targeting semi-modern browsers and don't need much, or you can use one of a dozen libraries that do this, but 27 files sounds pathological.
    - Silhouette 9y ago
      A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. No. Sorry, but that's just nonsense. A modal is probably going to be rendered as an HTML div element, styled so it appears with a fixed centre-viewport position. You probably also want a second div as an overlay to de-emphasize the rest of the page while the modal dialog div is visible. You might want a standard X button to close the dialog, which hides the above when it's clicked. You can write all of that in less than a screenful of code, and you can do it using nothing but basic web standards that are supported as far back as IE8 and iOS5 -- in other words, well before the browser generations that even Microsoft and Apple themselves still support today.
      - simion314 9y ago
        You need more functionality for a non basic modal, first problem is if you have 20 modals you want not to copy paste over and over again. For non basic modals you also need events to know if user accepted or dismissed the modal, you want the Escape key to also work, you want the option to allow or not closing the modal when clicking outside of it, The project I work on uses bootstrap, this means in the main html file you have copy pasted same html boiler-plate with only the content change, somewhere there is a button that has a special attribute that magically opens this modal(bootstrap js does that in the background), this does not scale and we searched for a good library so we can put each modal in it's own file and we also needed full control to create the modal if and when we needed it and not have it loaded in the main html but hidden. The solution would be to have modals implemented as standard and not having to hunt for a library because the lib we used is for angular+bootstrap but it will not work for react+bootstrap or for no framework projects.

thunderbong 9y ago

I agree with the GP with regard to Angular4. But have you really tried to create a modal in HTML/CSS/JS without any framework? It's surely not one line of code!

aaron-lebo 9y ago
OK, so it's a dozen. https://stackoverflow.com/questions/25920941/how-do-i-overlay-a-popup-view-in-mithril-js https://stackoverflow.com/questions/25920941/how-do-i-overla... Didn't say not to use a framework. Use it and some CSS and that's a basic task, not to mention there are other libraries which do it for you already.
- onion2k 9y ago
  Does that work in several versions of different rendering engines that date back a decade, at resolutions from 800x600 to an iMac 5K screen? How about on tablet and mobile devices? What happens when the user's scroll position is half way down the page? Does it listen for events to update or close itself? A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. If you have a simpler use case then you don't need all that extra edge case handling, but that doesn't mean it's not pointless code.
  - aaron-lebo 9y ago
    What's the likelihood that he's supporting engines going back a decade? Modern rendering engines and CSS handle that pretty well. IE 8 is 8 years old. Bootstrap 3 supports IE 8 and has modals. Point being, you can either write up a simple modal if you are targeting semi-modern browsers and don't need much, or you can use one of a dozen libraries that do this, but 27 files sounds pathological.
  - Silhouette 9y ago
    A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. No. Sorry, but that's just nonsense. A modal is probably going to be rendered as an HTML div element, styled so it appears with a fixed centre-viewport position. You probably also want a second div as an overlay to de-emphasize the rest of the page while the modal dialog div is visible. You might want a standard X button to close the dialog, which hides the above when it's clicked. You can write all of that in less than a screenful of code, and you can do it using nothing but basic web standards that are supported as far back as IE8 and iOS5 -- in other words, well before the browser generations that even Microsoft and Apple themselves still support today.
    - simion314 9y ago
      You need more functionality for a non basic modal, first problem is if you have 20 modals you want not to copy paste over and over again. For non basic modals you also need events to know if user accepted or dismissed the modal, you want the Escape key to also work, you want the option to allow or not closing the modal when clicking outside of it, The project I work on uses bootstrap, this means in the main html file you have copy pasted same html boiler-plate with only the content change, somewhere there is a button that has a special attribute that magically opens this modal(bootstrap js does that in the background), this does not scale and we searched for a good library so we can put each modal in it's own file and we also needed full control to create the modal if and when we needed it and not have it loaded in the main html but hidden. The solution would be to have modals implemented as standard and not having to hunt for a library because the lib we used is for angular+bootstrap but it will not work for react+bootstrap or for no framework projects.