Hide modal forum default: jqgrid - pop up |
Hide modal forum default: jqgrid - pop up |
publicGenome |
Nov 13 2015, 04:42 PM
Post
#1
|
Group: Members Posts: 8 Joined: 13-November 15 Member No.: 23,739 |
Hi HTML-ers,
Thanks for the forum. I'm a noob in HTML, and web development. Pardon my naive questions, and apologies should I violated any forum rule. I'm trying to create a modal form. I've jqgrid. in Jqgrid, on click of a button a dialog box fires up, with abc details, form. That is div id - dialog-analysis CODE <div id="dialog-analysis" title="Add Analysis"> <form > <form> <fieldset> <div> <label for="name">Name</label> <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all"></br> </div> <div> <label for="email">Email</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"></br> </div> <div> <label for="password">Password</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"></br> </div> <!-- Allow form submission with keyboard without duplicating the dialog button --> <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> </fieldset> </form> </form> </div> My java script looks like: CODE document.getElementById("dialog-analysis").style.display="none"; $("#grid_illume").navButtonAdd('#pager_illume',{ caption:"Add Analysis", onClickButton: function() { var dialog = $("#dialog-analysis").dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { 'Cancel': function() { dialog.dialog( "close" ); }, 'Confirm': function(){ } } }); dialog.dialog("open"); } }); However, I've to write: document.getElementById("dialog-analysis").style.display="none"; at the top to not to display the form until the button is clicked. Upon clicked, fine windows pops out. I was wonder if there's any other way to hide? I used the sample from: http://jqueryui.com/dialog/#modal-form And here, the code doesn't use (or similar): document.getElementById("dialog-analysis").style.display="none"; That is what interests me. Kindly help. Again, thank you for your help in advance! |
CharlesEF |
Nov 13 2015, 08:46 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I'm not sure I understand the question. What does this mean: 'Upon clicked, fine windows pops out.'? Or do you mean five windows open up? I also see you are defining a form inside a form. You don't need to do that, only 1 form is needed.
To make the form hidden upon page load you need to use CSS. You can create a CSS rule for 'dialog-analysis' which has 'display: none;' in it. Or you can use the style attribute if you don't want to use a CSS rule. This will make the div, which contains the form, hidden when loaded. Then your button click only needs to show the div when clicked, 'display: block;'. |
publicGenome |
Nov 15 2015, 11:23 AM
Post
#3
|
Group: Members Posts: 8 Joined: 13-November 15 Member No.: 23,739 |
I'm not sure I understand the question. What does this mean: 'Upon clicked, fine windows pops out.'? Or do you mean five windows open up? I also see you are defining a form inside a form. You don't need to do that, only 1 form is needed. To make the form hidden upon page load you need to use CSS. You can create a CSS rule for 'dialog-analysis' which has 'display: none;' in it. Or you can use the style attribute if you don't want to use a CSS rule. This will make the div, which contains the form, hidden when loaded. Then your button click only needs to show the div when clicked, 'display: block;'. Hi Charles, Thank you for your reply. My apologies, a typo in QUOTE Upon clicked, fine windows pops out. It is QUOTE Upon clicked, window pops out. That is, it works fine.QUOTE I also see you are defining a form inside a form. Sorry, I did that by mistake. If I'm not wrong, the below is what you're referring to: CODE document.getElementById("dialog-analysis").style.display="none" To use for 'none' and 'block'? Thanks again for your help, and reply. Best, pG This post has been edited by publicGenome: Nov 15 2015, 12:12 PM |
CharlesEF |
Nov 15 2015, 04:00 PM
Post
#4
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
I thought you wanted the form hidden when the page loads without using javascript? That is what I was recommending, using CSS. Did I not understand your question? Yes, you need 'display: block;' in javascript to show the hidden form. But 'display: none;' can be used in the CSS section to hide the form when the page is loaded. No need for javascript to hide the form.
|
publicGenome |
Nov 15 2015, 04:03 PM
Post
#5
|
Group: Members Posts: 8 Joined: 13-November 15 Member No.: 23,739 |
I thought you wanted the form hidden when the page loads without using javascript? That is what I was recommending, using CSS. Did I not understand your question? Yes, you need 'display: block;' in javascript to show the hidden form. But 'display: none;' can be used in the CSS section to hide the form when the page is loaded. No need for javascript to hide the form. Hi Charles, You understood my question properly. I didn't know if form can be hidden in JS as well as CSS. Thank you much for your reply. I'll go ahead with CSS. |
Lo-Fi Version | Time is now: 29th March 2024 - 05:19 AM |