Creating Modal Dialog

HTML & CSS
1

Hello everyone and thanks for your help in advance. I am new to responsive design and need to redevelop a site that currently uses the jQuery dialog for modal dialog display. I wanted to know if there are better alternatives for modal dialog display since I find the dialog widget to be cumbersome styling (or may I just don’t understand how to style it). Would someone be able to give me insight on this topic and best practices for development? Any help would be appreciated.

2

Hi there kmcnet,

you won’t get anything “JQuery” from old coothead, promise. :mask:

Here is a CSS example for you to try…

[code]

untitled document #cb { display: none; } #cb:checked~#mask { top: 50%; left: 50%; right: 50%; bottom: 50%; border-width: 0; border-radius: 50%; transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } #cb:checked~#mask #box { display: none; } #mask { position: fixed; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; border: 0.625em solid #000; border-radius: 0; box-shadow: inset 0 0 2.5em #000; background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9)); transition: all 1.5s ease; } .hide { display: none; } .show { display: block; } #box { position: relative; width:20.5em; padding: 0.25em 1.5em 1em; border: 0.125em solid #000; border-radius: 0.625em; margin: 10% auto; background-color: #fff; background-image: linear-gradient(to bottom,#fff,#888); } #box h2 { text-align: center; } #close { position: absolute; top: -1em; right:-0.875em; padding: 0.25em 0.5em; border-radius: 0.75em; border-radius: 50%; font-weight: bold; color: #fff; cursor: pointer; background-color: #333; box-shadow: 0.1em 0.1em 0.25em #000; } #close:hover { background-color: #fc0000; }
X

NOTICE:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.

[/code]

coothead

2 Likes
3

By strange quirk of fate, I’ve just been looking around for simple modal options. The one I’ve just been looking at uses a hidden <div>, a bit of CSS and then uses JS to toggle the <div>'s visibility. Create a Modal Dialog Using CSS and Javascript

1 Like
4

Thanks for the responses. I’ll take a look. Am I thinking incorrectly in the idea of not using the widgets? I’m using jQuery to make ajax calls and DOM manipulation in order to be more cross-browser compliant. Should I abandon that thinking?

5

Is this pretty cross-browser bulletproof?

6

Hi there kmcnet,

It works OK in all of my test browsers…

  1. IE11
  2. Firefox
  3. Chrome
  4. Opera

coothead

1 Like
7

That’s the thing… jQuery is certainly foolproof and handy. But many people seem to go for $ by mere habit, although things like a simple modal are easy enough to write with plain JS. So if you’re using jQuery anyway for AJAX etc., why not use it to write that modal (or look for a decent plugin)…? If not, I’d hesitate to pull that library for just this single purpose.

Anyway, here’s such a plain JS simple modal I just made up:
https://github.com/m3g4p0p/YAJSM
As you say styling was an issue with the jQuery plugin, this one comes basically unstyled. ;-)

1 Like
8

I agree.

Those few bytes of bloat can cause so many problems on the majority of machines and networks.

9

Wut?

10

I’ve seen those few bytes bring big down entire sites. It’s not pretty.

11

Sorry, but I don’t know where your remark came from. What you are responding to? It doesn’t seem to fit anything that @coothead said. Plus it sounds a bit cynical… belittling of something. What is your point? Did you post in the wrong conversation?

12

Thanks for the response. Not sure what some of the other posts below are referring to. So for someone less experienced like myself, using the jQuery library to make ajax calls and populate DOM elements from the ajax calls is not a bad idea, but using jQuery (or Angular or some of the other JS libraries) for things that can be done with CSS and a little JS is simply not worth the overhead of the jQuery library. Am I understanding correctly?

13

You certainly are. :sunglasses:

coothead

1 Like
14

Personally, I’d suggest to use jQuery only if you understand and appreciate what it’s doing, not as a substitute for learning how to do all this w/ plain JS. I know it’s tempting, but you might likely end up posting here wondering why your carefully copy/pasted jQuery-snippets don’t work as expected, only because you skipped the basics and went straight jQuery. ;-)

But otherwise I’d agree. :-) It certainly can make your life easier.

4 Likes
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.