Solved

jquery modal dialog.

Posted on 2011-02-15
9
1,534 Views
Last Modified: 2012-08-13
I am using jquery modal dialog.
In the popup I need to show 400 px(width) by 200px(height) window with all the css design.
But the default size of the Jquery modal dialog is 300px only. So part of the popup is going inside the   modal dialog. I checked "jquery-ui.css" file to find out the width. But it didnt work.
It seems its getting the width dynamically.

And one more thing how to set the back ground color of the page to light gray.
I am using Visual Studio 2005 for development. How I can debug javascript in VS2005.

Any help will be highly appreciated.  
0
Comment
Question by:ken_rgr
  • 5
  • 4
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34903375
you can apply the class the modal dialog box, after the dialog box is generated.
Also width and height can applied as an option also (see the link given below)
http://jqueryui.com/demos/dialog/#option-height
http://jqueryui.com/demos/dialog/#option-width

also you can see the markup generated here
http://jqueryui.com/demos/dialog/
goto the theming tab to check the sample markup



0
 

Author Comment

by:ken_rgr
ID: 34903409
Hi Thanks for your reply.
But l already checked these links.
I didnt find any where how to set the width and height property for the modal
dialog

Thanks
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34903554
in above mentioned links, you need to check
$( ".selector" ).dialog({ height: 530 }); \\while initializing
$( ".selector" ).dialog( "option", "height", 530 ); \\setter

$( ".selector" ).dialog({ width: 530 }); \\while initializing
$( ".selector" ).dialog( "option", "width", 530 ); \\setter

0
 

Author Comment

by:ken_rgr
ID: 34911703
Hi

Thanks for the reply, I have figured out how to set the width and height.
But there is a problem , my div width is 350px, I set the modal dialog width as 420px.
Other wise its showing scrollbars for the modal window, which I dont want.
My question is, is it possible can we set the same width and height for the modal dialog
as like my div without the scroll bars.
I appreciate your time .

thanks
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 40

Expert Comment

by:gurvinder372
ID: 34913657
@ken_rgr: if possible please share the sample code that you are trying and having the above mentioned problem. Thanks
0
 

Author Comment

by:ken_rgr
ID: 34919399
Hi
I fixed the width problem.
Still there is aproblem.
There are 2 checkboxes  and button on the modal dialog.
When the user checks one of the (or both) checkboxes and clicks on the button.
How the values will be passed to the page behind it.
The setVisibility() function runs when the use clicks on the Button.
I captured the values from check boxes successfully but I am not able to
pass those values to the page(lets pass it to a textbox).
I am getting the corect values from the alert boxes.
but the below line not passing the values to the page.
$("#checkbox1").value = value1;
What mistake I am doing here.

Once again thanks for your time.



<script type="text/javascript">
      function setVisibility(id, visibility) { 
      var value1,value2;
      ($("#check1").attr("checked")) ? value1 = 1 : value1 = 0;
      ($("#check2").attr("checked")) ? value2 = 2 : value2 = 0;
       $("#textbox1").value = value1;
      
      alert(value1);
      alert(value2);
       
      document.getElementById(id).style.display = visibility;
      $("#dialog").dialog("close");
      }
    </script>

Open in new window

0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34919438
if you want to set the values using jquery it needs to be this way
$("#checkbox1").val(value1);
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34919453
0
 

Author Comment

by:ken_rgr
ID: 34921286
Really appreciated your help and time.
It solved my problem.
Here I am accepting your solution.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now