SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating pop up form with dark background

    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.

    http://www.w3schools.com/js/tryit.as...try_win_opener

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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    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.
    What you're looking for is commonly called a modal window.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    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.
    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 resizable either.

    I've put up a simple demo of this at http://jsfiddle.net/pmw57/jmPaC/1/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Location
    Timisoara, Romania
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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.
    http://jsfiddle.net/pmw57/jmPaC/4/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks this is very helpful.

  10. #10
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%...CT%20LIST.html

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    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???
    Here it is again from the jsfiddle example that I put together earlier, which uses jQueryUI button method to style a button.

    Code javascript:
    $("#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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    http://jqueryui.com/button/



    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. #14
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured out how to edit the cancel and create buttons That top right close button eludes me....for now.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Figured out how to edit the cancel and create buttons That top right close button eludes me....for now.
    The styling for things like the close button comes from the default jQueryUI styling, from http://code.jquery.com/ui/1.9.1/them.../jquery-ui.css
    In my example I used a prettier jQueryUI styling called ui-lightness, from http://code.jquery.com/ui/1.9.0/them.../jquery-ui.css
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Manchester
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you not just use lightbox or colorbox for a popup?

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mj_coder View Post
    can you not just use lightbox or colorbox for a popup?
    That's the thing - he's not just wanting a popup.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The jsfiddle is working great. That's what I wanted.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •