4

Visual Studio 2008 SP1 と C# を使用して ASP.NET WebForm アプリケーションを開発しています。

次の ASPX ページがあります。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#dialog").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    'Ok': function() {
                        __doPostBack('TreeNew', '');
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                },
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="Nuevo" 
            OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog_target"></div>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Text</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    </form>
</body>
</html>

モーダルがtrueに設定されている場合、ページの星が大きくなります（両方のスクロールバーが小さくなっているため、垂直バーは水平バーよりも高速です）。

ページのソース コード内を見ると、次の div がフォーム タグの外側にあることがわかります。

<div class="ui-widget-overlay" style="z-index: 1001; width: 1280px; height: 65089px;" jQuery1267345392312="20"/>

modal を false に設定すると、エラーは発生しません。問題は、モーダルとして機能するdivがフォームの外にあることだと思います。

どう思いますか？

4

4 に答える 4

2

このスタイルを設定すると問題が解決します

<style type="text/css"> 

.ui-widget-overlay   
{   
    background-color: #000000;   
    left: 0;   
    opacity: 0.5;   
    position: absolute;   
    top: 0;   
}   

.ui-dialog   
{   
    background-color: #FFFFFF;   
    border: 1px solid #505050;   
    position: absolute;   
    overflow: hidden;   
} 


</style>
于 2011-04-26T18:10:52.557 に答える
1

ここでIE 8でそれを修正したこれを見つけました：

「クラス .ui-widget-overlay の位置 CSS プロパティを絶対から固定に変更すると、スクロール バーの問題が修正されましたが、IE 6 でメモリ ブリードとハングが発生しました。 CSS ファイル:

.ui-widget-overlay { position: fixed; } 
.ui-widget-overlay { _position: absolute; }

最初のエントリは、IE 8 のスクロール バーの問題を修正するために使用され、うまく動作します。「_」を含む 2 番目のエントリは IE 6 でのみ取得され、IE 6 ではスクロール バーの問題が発生しなかったため、絶対位置に戻されます。

于 2011-11-08T18:10:35.430 に答える
1

私はあなたが正しいと思います、オーバーレイはページの残りの部分をフェードアウトすることですが、ご覧のとおり、使用しているテーマに移動するだけで、おそらく ui-widget-overlay クラスをハックしてそれほど大きくならないようにすることができます。 65089ピクセルの高さで非常に奇妙に見えると言います。max-height をおそらく 100% に設定してみてください。

于 2010-02-28T08:42:16.130 に答える
0

ダイアログのcloseイベント（ダイアログdestroy()sのオーバーレイの前）でこれを実行してみてください。

div.data('dialog').overlay.$el.css({height: 0, width: 0});

jQuery UIオーバーレイオブジェクトがDIVを削除するのではなく、再利用するという事実と関係があると思います。

于 2010-04-10T04:14:30.347 に答える