3

この質問のjsFiddle

私は現在、ポップアップボックスを作成するためのjQueryプラグインであるブートストラップモーダルを使用しています。（誰かが非常に短いドキュメントをチェックしたい場合は、ここにそれへのリンクがあります-それは非常に短いので、1分しかかかりません）。

残念ながら、私はいくつかの問題を抱えています：

  1. モーダルポップアップボックスのサイズを定義できるようにする必要があります。次のことを試しましたが、正しく表示されません。

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

  2. デフォルトでモーダルを非表示にできる必要があります。現在、ページが読み込まれるとすぐに表示されます。次のことを試しましたが、正しく非表示になっていないようです。

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

これらの問題をどのように解決できるか考えてみてください。

4

8 に答える 8

2

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.

于 2012-04-15T04:38:40.400 に答える
2

Try the following in the source. Worked for me.

  $('#ModalForm').dialog(
   {
        modal : true ,
        autoOpen : false ,
        height : 300,
        width : 400,
. . . .
于 2012-08-17T09:49:08.433 に答える
1
于 2012-04-15T04:37:39.387 に答える
1

try this

<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">
于 2012-04-15T04:38:32.427 に答える
1

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.net/zkzuM/2/, full page demo: http://jsfiddle.net/zkzuM/2/show/

于 2012-04-15T05:04:29.567 に答える
1 
#myModal{
    height:200px;
    width:100px;
}

try adding something like this to the css

your javascript 

$('#myModal').modal({'show':false});
于 2012-04-15T05:10:08.140 に答える
1

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);
于 2012-04-15T05:20:07.497 に答える
1

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

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

于 2012-11-16T01:29:11.713 に答える