3

jquery ダイアログ ボックスがとてつもなく巨大で、その理由がわかりません。CSS を手動で設定しても機能しないようです。[サインイン] ボタンをクリックして、ダイアログ ボックスを表示します。

現在制作中のサイトはこちらです。

http://crowdfunderssecrets.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

次に、auto ではなく、ページの 2 番目の 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" 

物事はもう少し正常に見え始めます-うまくいけば、これが分析を開始する場所になるでしょう....

于 2013-05-02T15:39:33.173 に答える
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 に答える