Question

所以，我有一个简单的模态窗口，应该显示一个由动态内容组成的javascript库。我创建了一个简单的.php文件

测试文件：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="css/jqModal.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<link rel="stylesheet" href="css/featureCarousel.css" charset="utf-8" />
<script src="js/jquery.featureCarousel.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                      //this function should open Modal window and load shirts.php
                $('#dialog').jqm({ajax: 'shirts.php'});

            });
        // once shirts php is loaded and ready, this function should give content is animation and behavior 
            $('#featureCarousel').ready(function(){
                $("#featureCarousel").featureCarousel({
                    // include options like this:
                    // (use quotes only for string values, and no trailing comma after last option)
                    // option: value,
                    // option: value
                });

            })
        </script>


</head>

<body>
 <a href="#" class="jqModal">view</a>
 <div class="jqmWindow" id="dialog">


 </div>

</body>
</html>

Shirts.php：

 <?php require_once("includes/connection.php"); ?>
<?php $query = mysql_query("SELECT * FROM products WHERE category=3"); ?>

<div id="featureCarousel">
<?php
    while($product_set = mysql_fetch_assoc($query)) {
         print "<div class=\"feature\" \"><a href=\"javascript:void(0)\" id=" . $product_set['products_id'] . "><img alt=\"Image Caption\" src=" . $product_set['products_image'] . "></a><div><p>This is some information that can go along with an image.
            Anything can be placed here, including images.</p></div></div>";
    }
?>
</div>

对于模态的

css：

.jqmWindow {
    display: none;

    position: fixed;
    top: 17%;
    left: 50%;

    margin-left: -300px;


    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
    width: expression(this.parentNode.offsetWidth+'px');
    height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

画廊的css

/********************
 * FEATURE CAROUSEL *
 ********************/
#featureCarousel {
    height: 380px;
    width:960px;
    position:relative;
}
#featureCarousel img {
    border:0;
}
#featureCarousel .feature {
    position:absolute;
    top:-1000px;
    left:-1000px;
    border:3px solid white;
    cursor:pointer;
}
#featureCarousel .feature > div {
    position:absolute;
    bottom:0px;
    left:0px;
    background-color:black;
    width:100%;
}
#featureCarousel .feature > div p {
    margin:0;
    padding:5px;
    font-weight:bold;
    font-size:12px;
    color:white;
}
#featureCarousel .blipsContainer {
    position:absolute;
    color:white;
    right:25px;
    top:310px;
    padding:0;
    margin:0;
}
#featureCarousel .blipsContainer .blip {
    margin:3px;
    height:14px;
    width:14px;
    color:white;
    text-align:center;
    font-size:10px;
    border:1px dotted black;
}
#featureCarousel .blipsContainer .blipSelected {
    color:white;
    font-weight:bold;
    background-color:black;
}

当我加载我的index.php时，模态打开并且为空。所以我查看源代码;这表明所有内容都是正确生成的。但由于一些奇怪的原因，它是不可见的。

我做错了什么？

http://suit-brokers.com/modal_test/modaltest.php

Answer 1

featureCarousel.css中的#featureCarousel .feature样式有一些极端负面的位置，使您的内容不可见。也许有点改变你的风格，所以他们不会在这个页面上的某处上下左移-1000px，你的问题就会得到解决。

怎么了？

1 个答案: