jsFiddle for this question

I am currently using bootstrap modal, which is a jQuery plugin to create a popup box. (If anyone wants to check out the very short documentation, here is a link to it - it's very short, so only takes a minute).

Unfortunately, I am having a couple problems:

1. I need to be able to define the size of the modal pop-up box. I tried the following, but it does not display correctly:

   <div class="modal" id="myModal" style="width: 800px; height: 900px;">

2. I need to be able to hide the modal by default. Currently, it displays as soon as the page loads. I tried the following, but it does not seem to hide correctly:

   $(document).ready(function() { $('#myModal').modal("hide"); });

Any idea how I might be able to resolve these issues?

jsFiddle for this question

I am currently using bootstrap modal, which is a jQuery plugin to create a popup box. (If anyone wants to check out the very short documentation, here is a link to it - it's very short, so only takes a minute).

Unfortunately, I am having a couple problems:

1. I need to be able to define the size of the modal pop-up box. I tried the following, but it does not display correctly:

   <div class="modal" id="myModal" style="width: 800px; height: 900px;">

2. I need to be able to hide the modal by default. Currently, it displays as soon as the page loads. I tried the following, but it does not seem to hide correctly:

   $(document).ready(function() { $('#myModal').modal("hide"); });

Any idea how I might be able to resolve these issues?

• javascript
• jquery
• twitter-bootstrap
• popup
• modal-dialog

• One question at a time please. – Marc Commented Apr 15, 2012 at 4:28
• sorry. I deleted last question which more appropriate for another question , You are right . Any part of the answer is very appreciate – user782104 Commented Apr 15, 2012 at 4:34

8 Answers 8

Answer 1: Try defining the modal CSS class and set the width and height. Answer 2: when calling the modal function, pass in an option object with th property "show" as false.

$("#myModal").modal({show: false});

Answer 3: you can handle the "shown" event and wire it up to make an AJAX call to web page and set the result as the inner HTML of the div.

Try the following in the source. Worked for me.

  $('#ModalForm').dialog(
   {
        modal : true ,
        autoOpen : false ,
        height : 300,
        width : 400,
. . . .

try this

<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">

To answer the second question the documentation says you can add an option like $('#myModal').modal({'show':false}) so that on initialization it should not be shown.

Third question's answer is use an iframe or load the html using ajax. To stop people from submitting you could use javascript for that or place a clear div to prevent anyone from actually using it. The first method assumes you are loading the form from the same domain.

Try this to force the dimensions to the what you want $('#myModal').modal({'show':false).height('600px').width('500px');​

You can supply the .hide class to the container of the modal to hide it, which is the default bootstrap method of hiding modals. As to the size, you can again supply your own class with your custom width and height to the container and it should take up on it, the way you're adding it inline now works fine as well, just make sure to add it to the main container.

So all in all your modal container should look like this:

<div class="modal hide fade custom-size" id="myModal"> ... </div>

Note: Added the .fade class to add the transition fade/slide effects, you can remove it if you like if you don't want those effects.

And as for the modal poping up as soon as you load your page all you have to do to remove that behavior is not call the modal at all as you are now, that way the modal will only popup when you click on action or "Launch Modal" button.

Here is a cleaned up fiddle, you had some non-valid styles like float:center (i wish that one existed): http://jsfiddle/zkzuM/2/, full page demo: http://jsfiddle/zkzuM/2/show/

#myModal{
    height:200px;
    width:100px;
}

try adding something like this to the css

your javascript

$('#myModal').modal({'show':false});

Take a look at the fiddle and its result.

.modal-body class has a max-height of 400px. If you want a static height as 900px you should set height and max-height of .modal-body. Otherwise that close button and its bar might float over the box.

#myModal .modal-body {
  height: 775px;
  max-height: 800px;
}

It's 775px for a 900px high #myModal because of margins and paddings of the box model. It's always 125px shorter. If you want to make it dynamic you can write something like:

$('#myModal .modal-body').height($('#myModal').height()-125);

1. You do it right but have take a look the bootstrap CSS if it use the max-width min-width and ment it out.

2. If it does not work in JS you can do it by putting hide class in modal wrapper.