asp.net – 当modal设置为TRUE时,jQuery UI对话框出现问题

发布时间：2020-12-16 09:57:28 所属栏目：asp.Net 来源：网络整理

导读：我正在使用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/

我正在使用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>

当modal设置为true时,页面会增长(我知道因为两个滚动条变小,垂直条比水平条快).

查看页面内容源代码我看到以下div是外部表单标记：

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

如果我将模态设置为false,则不会发生错误.我认为问题在于作为模态工作的div不在形式之内.

你怎么看？

解决方法

设置此样式将解决问题

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!