Geek asks and answers

JQuery UI modal (popup) controls size and hides by default

jsFiddle for this question

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

Unfortunately, I have a couple of problems:

  • I need to determine the size of a modal popup. I tried the following, but it does not display correctly:

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

  • I need to be able to hide the modal file by default. It is currently displayed as soon as the page loads. I tried the following, but it did not seem to hide correctly:

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

How can I solve these problems?

+3
source share
8 answers

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

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

Answer 3: you can handle the “shown” event and hook it in to make an AJAX call to a web page and set the result as an internal HTML div file.

+2
source

Try the following in the source. Worked for me.

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

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

- iframe html ajax. , javascript div, . , .

, , $('#myModal').modal({'show':false).height('600px').width('500px');​

+1

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

.hide , , . , , , , , .

, :

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

.. .fade fade/slide, , , .

, , , , , , , " ".

, float:center ( , ): http://jsfiddle.net/zkzuM/2/, -: http://jsfiddle.net/zkzuM/2/show/

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

- css

javascript

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

fiddle .

.modal-body class 400px. , 900 , .modal-body. .

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

775px 900px high #myModal - paddings box. 125px . , - :

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

  • , bootstrap CSS, max-width .

  • JS, , hide .

+1

More articles:


All Articles