Creating pop up form with dark background

JavaScript
1

So, I’m trying to learn how to create a form that that

  1. pops up
  2. isn’t a window that can be moved
  3. and doesn’t make me leave the current page.
  4. Provides a darkened transparent background drop that hides the content on the current page.

I’ve watched some javascript tutorials and have a small base but still am not quite sure what I should be looking to learn in order to accomplish this.

I just need some direction on what I should be looking at to accomplish this. I looked at this page, but I think I still need more info.

Any suggestions on where I can start to learn how to do this?

2

What you’re looking for is commonly called a modal window.

3

Sweet. Any good places to start? I’ve search how to create modal window and the search results don’t provide me with very good results.

4

What would help is if you could tell us about the code libraries that you’re already using, or wouldn’t mind using such as jQuery.

5

jQuery would be best I’m guessing. I mainly know html, css, and wordpress. I’ve done some javascript and jquery tutorials and so jQuery would prob be best.

6

Then the following demo of jQuery’s modal dialog would be useful http://jqueryui.com/dialog/#modal-message
You can set the dialog to not be draggable or [url=“http://api.jqueryui.com/dialog/#option-resizable”]resizable either.

I’ve put up a simple demo of this at http://jsfiddle.net/pmw57/jmPaC/1/

7

A modal window (otherwise called a lightbox) can serve a lot of purposes. It can act as a dialog box, like in the tutorial Paul kindly provided, or can contain other elements.

Now since it’s a form you need to display in the lightbox, I suggest you check out 123ContactForm - free form builder. It’s a dedicated app that can build JavaScript lightbox forms intuitively, without any coding on your side. You just create the layout of your form in a drag & drop editor, then copy the lightbox code and paste it onto your website.

I’ve been with them several years, great service to deal with.

8

Following on from the example that I gave before, here’s a modal form window, which appears when you select the “Create new user” button.

9

Thanks this is very helpful.

10

Well, I played with the code some from js fiddle, but can’t quite get the same code to work. What am I missing? I’m just trying to get the sample code to work before playing with it. Is it that I’m using the absolute urls for jQuery? I’m getting some sleep, but definitely am going to dive into it tomorrow/today.

http://www.laworganizer.com/POP%20UP/POPUP.html

11

Okay so I got it working for the most part but I’m having troubles understanding the styling of <button id=“create-user”>Create new user</button> and items on the pop up like close button right now in the top right hand corner which you can’t see til you hover over it, the create an account button, and the cancel button.

I think that the jquery-ui file is providing the styles for these but I just don’t see where. I see no #create-user

Is there something tricky about how this is styled???

You can see this pop up at this url

http://laworganizer.com/4)%20Single%20contact%20view/SingleContactView_CONTACT%20LIST.html

12

Here it is again from the jsfiddle example that I put together earlier, which uses jQueryUI [url=“http://jqueryui.com/button/”]button method to style a button.


$("#create-user").button().click(function () {
    $("#dialog-form").dialog("open");
});

In regard to the close button - the HTML code is appearing on your page for it, so the blame must go to your styles which don’t seem to do anything yet in regard to the .ui-dialog-titlebar-close class.

13

Yes I see the id for the button, but I don’t see the style for it in the style sheet. Also, I did look at you jsfiddle example, but ended up using the code from the other site that you recommended. http://jqueryui.com/dialog/#modal-form

So, I guess I don’t see where you’re styling your button your js fiddle example???

body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }

I don’t know what you want me to look at on this page?

Okay I got the styling to work using this as a tester

	#create-user {
		background-color:#00CC33;
		
	}

I was just confused because I saw no css for it and so those default colors were coming from where???

I am beginning to understand this code now. I see where I could edit the create button and the cancel button on the pop up. I don’t see and id or understand the class I use to style these though???

14

Figured out how to edit the cancel and create buttons :slight_smile: That top right close button eludes me…for now.

15

The styling for things like the close button comes from the default jQueryUI styling, from http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
In my example I used a prettier jQueryUI styling called ui-lightness, from http://code.jquery.com/ui/1.9.0/themes/ui-lightness/jquery-ui.css

16

can you not just use lightbox or colorbox for a popup?

17

That’s the thing - he’s not just wanting a popup.

18

The jsfiddle is working great. That’s what I wanted.