我有一个可调整大小的 jquery 对话框，当我调整它的大小时，如果我减小尺寸，它只会覆盖内容，或者如果我增加尺寸，它会添加空白。我需要做什么不同的事情才能调整对话框的实际内容大小？
jquery:
function showDialog(div, src) {
$(div).html('<IFRAME id="orderframe" name="orderframe" frameBorder=0 width="100%" height="100%" style="overflow-x: hidden; overflow-y: scroll;" src="' + src + '"></IFRAME>')
.dialog({ modal: true, height: '100%', width: 1050, position: ['top', 20], resizable: true });
return false;
}
html div:
<div id="divId" title="Shopping Cart" style="width:100% !important; height: auto !important; padding: 0 !important;" />
html div 内容:
<body class="generalpage" id="BodyTag" runat="server">
<form id="Form2" method="post" runat="server" enctype="multipart/form-data">
<input id="myhiddenfield" type="hidden" value="null" name="myhiddenfield" runat="server" />
<!-- Content Start -->
<div id="shoppingCartMaster">
<div class="shoppingCartWrapper">
<div class="shoppingCartContent">
<div class="shoppingCart">
<div class="intro">
<!-- Instruction Start -->
<uc1:Instruction ID="Instruction1" runat="server"></uc1:Instruction>
<!-- Instruction End -->
</div>
<div class="shoppingCartLeft">
<div class="shoppingSummaryWrapper">
<p id="ErrorAlignment" align="center" runat="server">
<asp:Label ID="ErrorMessage" runat="server" Visible="False" CssClass="ErrorMessages"></asp:Label></p>
<p id="MessageAlignment" align="center" runat="server">
<asp:Label ID="Message" runat="server" Visible="False" CssClass="Messages"></asp:Label></p>
<uc1:CCartControl ID="CCartControl1" runat="server"></uc1:CCartControl>
<div class="orderTotalWrapper">
<div class="uploads">
<div id="wrap">
<img src="Images/Upload.png" width="45" height="45" />
<span>If you need to upload a file pertaining to this order, you will be able to on
the order confirmation page.</span>
</div>
<div class="alignedButtons">
<div class="buttonBlue" style="float: left;">
<asp:LinkButton ID="btnUpdateQty" Text="Update Qty" runat="server"></asp:LinkButton>
</div>
<div class="orderNotes" style="float: left;">
<a href="#" onclick="var hf = $('#txtSpecialInstructionHidden').val();$('#txtSpecialInstruction').val(hf);SpecialInstructions_Update();return false;">
Order Notes/Special Instructions</a>
<asp:HiddenField ID="txtSpecialInstructionHidden" runat="server" />
</div>
<div class="buttonBlue">
<asp:LinkButton ID="btnContinueShopping" Text="Continue Shopping" runat="server"
Visible="true"></asp:LinkButton>
</div>
<div class="buttonRed">
<asp:LinkButton ID="btnCheckout" Text="Checkout" runat="server" Visible="true" OnClientClick="$('#divLoading').show()"></asp:LinkButton>
</div>
</div>
<div id="divLoading" class="loading">
<div style="background: #ffffff; opacity: 1.0; height: 48Px; width: 52Px; padding-top: 9Px;
vertical-align: middle; display: inline-block; margin-top: 200Px;">
<img src="Images/loading2.gif" style="border: none;" align="middle" alt="loading" />
</div>
</div>
<div id="specialInstructions" class="max" style="display: none;" title="Special Instructions:">
<div class="wrap">
<div class="content">
<div class="close">
<button type="button" value="X" />
</div>
<div class="title">
Special Instructions:</div>
<div class="copy">
<asp:TextBox ID="txtSpecialInstruction" runat="server" Rows="3" Columns="55" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="buttonWrap">
<div class="button A">
<asp:LinkButton ID="lnkUpdateInstructions" runat="server" OnClientClick="var hf = $('#txtSpecialInstruction').val(); $('#txtSpecialInstructionHidden').val(hf);">Save Instructions</asp:LinkButton></div>
<div class="button B">
<asp:LinkButton ID="lnkClearSpecialInstructions" runat="server" OnClientClick="var hf = ''; $('#txtSpecialInstructionHidden').val(hf);">Clear Instructions</asp:LinkButton></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="orderTotalWrapper">
<cc1:TotalDisplay ID="TotalDisplay1" runat="server" HandlingTotalLabel="Handling"
ShippingTotalLabel="Shipping" SubTotalLabel="Subtotal" MerchandiseLabel="Merchandise Total:"
MerchandiseStyle="order_subtotal_top" HeadingClass="section_titles_right" HeadingString="Order Total"
GrandTotalStyle="order_subtotal" GrandTotalLabel="Order Total:" ShippingTotalStyle="order_shipping"
ShipmentTotalStyle="order_shipping" LocalTaxTotalStyle="order_tax" StateTaxTotalStyle="order_tax"
CountryTaxTotalStyle="order_tax" LocalTaxTotalLabel="Local Tax" StateTaxTotalLabel="State Tax"
CountryTaxTotalLabel="Country Tax" BorderStyle="None" TaxShipNotIncludedStyle="order_subtotal"
DisplayTaxShipNotIncluded="True" DiscountTotalLabel="Discounts" DiscountTotalStyle="order_discount"
GiftCertificateTotalLabel="Gift Certificate" GiftCertificateTotalStyle="gift_cert"
DisplaySubTotal="True" DisplayStateTaxTotal="False" DisplayShippingTotal="false"
DisplayMerchandiseTotal="True" DisplayShipmentTotal="False" DisplayLocalTaxTotal="False"
DisplayHandlingTotal="False" DisplayDiscountTotal="False" DisplayCountryTaxTotal="False"
DisplayOrderTotal="False" DisplayGiftCertificateTotal="false" DisplayCODTotal="false"
DisplayCartItems="False" DisplayPaymentMethod="False" DisplayEditCart="False">
</cc1:TotalDisplay>
</div>
<div class="merchTotal">
</div>
<uc2:ProductUpSell ID="ProductUpSell1" runat="server" />
</div>
<div class="shoppingCartRight">
<!-- <div class="buttonRed">
<asp:LinkButton
ID="btnCheckout2"
Text="Checkout"
runat="server"
onclientclick="$('#divLoading').show()"
Visible="true">
</asp:LinkButton>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- Content End -->
</form>
</body>
最佳答案
在看不到 CSS 的情况下，您需要检查加载到 iframe 中的内容本身是否具有响应性 - 如果不是，那么您将看到您所描述的行为。
例如看到这个fiddle它会在 iframe 中加载响应式网站，并且当您调整对话框大小时，它会呈现良好且响应迅速的效果。
$(function() {
showDialog($("#divId"),"http://www.microsoft.com");
});
但是，请参阅此 fiddle它会加载一个无响应的网站，看起来就像您所描述的那样。
$(function() {
showDialog($("#divId"),"http://www.saix.net");
});
关于javascript - jQuery 对话框不调整 div 中内容的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26529970/