3

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,但由于某种原因不是这个)。

4

3 回答 3

2

那里发生了很多事情,但是如果您删除

content: "."

来自 jquery-ui.css(第 12 行)

.ui-helper-clearfix:after

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

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

事情开始看起来更正常了——希望这能给你一个开始分析的地方......

于 2013-05-02T15:39:33.173 回答
0

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

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

如果您将其插入到您的 CSS 中:

html{font-size:62.5%}

您将解决几个问题,包括 jQueryUI 的对话框太大。这是因为大多数浏览器的默认字体大小是 16 像素,这使得对话框很大。

jsFiddle示例1:太大

jsFiddle 示例 2:正常大小

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

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

Mozilla - 查看 EM 部分

值得阅读

于 2015-01-05T17:42:46.320 回答
0

由于上面的帖子,我想出了答案。

  <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 版本已经过时...>.>,抱歉,我犯了愚蠢的错误,但可能会帮助遇到同样事情的其他人。

于 2013-05-02T15:47:42.173 回答