jQuery对话框没有调整div中的内容

时间:2014-10-23 14:05:03

标签: javascript jquery html css jquery-ui-dialog

我有一个可调整大小的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>

1 个答案:

答案 0 :(得分:3)

如果没有看到您的CSS,您需要检查您在iframe中加载的内容是否自行响应 - 如果不是,那么您就会看到自己的行为描述

E.g。看到这个fiddle它会在iframe中加载一个响应式网站,当你调整对话框的大小时,它会呈现良好的反应性。

$(function() {
  showDialog($("#divId"),"http://www.microsoft.com");
});

但是,请参阅此fiddle,它会加载无响应的网站,看起来您正在描述。

$(function() {
    showDialog($("#divId"),"http://www.saix.net");
});