Question

jquery对话框非常庞大，我不知道为什么。手动设置CSS似乎也不起作用。单击“登录”按钮以查看对话框。

这是我目前正在处理的网站。

http://crowdfundersecrets.com/wwwteamcrowd/www/index.php

供以后参考，因为代码将在此处更改代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TeamCrowdFund</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <![endif]-->
    <link rel="stylesheet" href="fontkit/stylesheet.css" type="text/css" />

    <script type="text/javascript" src="js/html5.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

    <!--accordion -->
    <script type="text/javascript" src="accordion/javascript.js"> </script>
    <link href="accordion/format.css" rel="stylesheet" type="text/css" />
    <!--accordion -->

    <!--Tab -->
    <link href="css/tab-style.css" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <script>
        //Hide Other Modules.
        $(document).ready(function() {
            $("#signindialog").dialog({
              autoOpen: false,
              width:400,
              height:200,
                 maxHeight:200,
              modal:true,
              position: {my:"center", at: "center", of: window},
              resizable: false,
              show: {
                effect: "blind",
                duration: 500
              },
              hide: {
                effect: "explode",
                duration: 500
              },
              buttons: [{ 
                text: "Sign In",
                click: function() {
                    $( this ).dialog( "close" ); 
                } 
              }]
            });

            $('#signin').click(function(){
                $('#signindialog').dialog('open');
                console.log('Opening Sign In Dialog');
            });

            $(".module").each(function( index ) {
                if(!$(this).hasClass('visible')){
                    $(this).hide();
                }
            });

            $(".leftNav").click(function(){
                $(".leftNav").each(function(index){
                    //Set every nav item to not have current class
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                //Because the modules go in sequential order, we can use the number to determine which is which.
                var number = $(this).attr('number');
                var i = 0;
                $(".module").each(function( index ) {
                    i=i+1;
                    if(i==number){
                        $(".module").each(function( index ) {
                            $(this).hide();
                        });
                        $(this).show('slow');
                    }
                });

            });

            //Default Action
            jQuery(".tab_content").hide(); //Hide all content
            jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
            jQuery(".tab_content:first").show(); //Show first tab content

            //On Click Event
            jQuery("ul.tabs li").click(function() {
                jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
                jQuery(this).addClass("active"); //Add "active" class to selected tab
                jQuery(".tab_content").hide(); //Hide all tab content
                var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                jQuery(activeTab).fadeIn(); //Fade in the active content
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="signindialog" title="Login" style="height:200px">
        <div>Username:<input type="text" value="" id="usernamelogin"/></div>
        <div>Password:<input type="password" value="" id="passwordlogin"/></div>
    </div>
    <section class="centColl">
        <!--Header -->
        <header>
            <div class="headerMain">
                <h1 class="logo">
                    <a href="index.php"><img src="images/tcf-logo.png" alt=""></a>
                </h1>
                <div class="insdieTip">
                    <a href="insidertips.html" class="orange btnsmall"><span class="tips">Insider Tips</span></a>
                    <span>&nbsp;<a href="#" id="register">Register</a> | <a href="#" id="signin">Sign in</a></span>
                </div>
                <nav class="topnav">
                    <a href="index.php" class="text16">Our System</a>
                    <a href="crowdfunding-news.php" class="text16">Crowdfunding News</a>
                    <a href="services.php">Services</a>
                    <a href="community.php">Community</a>
                    <a href="company.php">Company</a>
                </nav>
            </div>

        </header>
        <!--Header -->

请帮我弄明白为什么？我不确定是什么导致了这个问题。我有这个在我的其他网站上工作（dnfinder.com，但出于某种原因不是这个）。

Answer 1

那里有很多事情，但是如果你删除了

content: "."

来自jquery-ui.css的

（第12行）

.ui-helper-clearfix:after

然后在页面上的第二个DIV中指定高度而不是自动

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" 
style="width: 400px; top: 0px; display: block; height: 400px; left: 507.5px;" tabindex="-1"

事情开始变得更加正常了 - 希望这能让你从......开始分析。

Answer 2

由于上面的帖子，我找到了答案。

  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

请注意，jquery-ui的CSS版本已经过时了...＆gt;。＆gt;，对不起我们这个愚蠢的错误，但可能会帮助其他经历同样事情的人。

Answer 3

有一个更简单的解决方案。

jQueryUI的对话框大小基于文档的默认字体大小设置。

如果将其插入CSS：

html{font-size:62.5%}

你将解决几个问题，包括jQueryUI的太大的对话框大小。这是因为大多数浏览器中的默认字体大小是16px，这使得对话框变得很大。

jsFiddle Example 1: too large

jsFiddle Example 2: normal size

示例之间的唯一区别在于CSS。

这就是为什么使用62.5％作为html的字体大小：

Mozilla - look at EMs section

Worth Reading

Jquery对话太大了？

3 个答案: