0

这是我的 html 代码，其中内容没有出现在我的 div 中。Tetxtarea，可以看到复选框，但看不到我写的任何文字。

我还编写了 css，它应该使 div 位于屏幕中间，但也不位于屏幕中心。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Popup Div | istockphp.com</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>

<style type="text/css">
.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2);
    left:calc(50% - 50px/2);
}
</style>
</head>
<body>
    <a href="#" class="topopup">Click Here Trigger</a>


    <div id="toPopup" class="center"  style="background-color: #EDEFF1; height:300px;width:500px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px; moz-border-radius-topleft: 15px;moz-border-radius-topright: 15px; border-bottom-left-radius: 15px; ">

        <div class="close"></div>
        <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
        <div id="popup_content"> <!--your content start-->
        <p><b>Share post </b></p>
            <textarea style="height:65px;width:400px;">
            </textarea> <br>         
            <input type="checkbox"> - Facebook <hr> </input>
            <input type="checkbox"> - Twitter  <hr>
            <input type="checkbox"> - Linked in <hr>
            </br></br>                
        </div> <!--your content end-->    
    </div> 
</art>
</body>
</html>

JSFiddle 链接：

http://jsfiddle.net/UD3U7/

在 jsfiddle 上它显示文本。实际上 div 应该弹出而直接出现。可以在 jsfiddle 上看到。

但是在我的本地主机上的 div 文本中看不到。

4

4 回答 4

2

检查这个。对于 textarea，打开和关闭标签（甚至是空格）之间的内容将被视为内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Popup Div | istockphp.com</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="script.js"></script>

<style type="text/css">
.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    margin: auto;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}
</style>
</head>
<body>
    <a href="#" class="topopup">Click Here Trigger</a>


    <div id="toPopup" class="center"  style="background-color: #EDEFF1; height:300px;width:500px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px; moz-border-radius-topleft: 15px;moz-border-radius-topright: 15px; border-bottom-left-radius: 15px; ">

        <div class="close"></div>
        <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
        <div id="popup_content"> <!--your content start-->
        <p><b>Share post </b></p>
            <textarea style="height:65px;width:400px;"></textarea> <br>         
            <input type="checkbox"> - Facebook <hr>
            <input type="checkbox"> - Twitter  <hr>
            <input type="checkbox"> - Linked in <hr>
            </br></br>                
        </div> <!--your content end-->    
    </div> 
</body>
</html>
于 2013-10-09T07:00:38.440 回答
1

我不确定你所说的“我写的任何文本都看不到”是什么意思，但我已经修复了你的 css 和 html 以允许弹出 div 在页面中居中。

如果您有 CSS 文件，则将所有样式放入 CSS 文件中。不要在 HTML 和 CSS 中混合使用样式，因为在调试和维护代码时会遇到麻烦。

这是更新的小提琴：http: //jsfiddle.net/JJ5rx/

HTML：

<a href="#" class="topopup">Click Here Trigger</a>

<div id="toPopup" class="center">
    <div class="close"></div>
    <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
    <div id="popup_content"> <!--your content start-->
        <p><b>Share post </b></p>
            <textarea cols="50" rows="5" placeholder="Enter comment..."></textarea> <br>

            <input type="checkbox"> - Facebook <hr> </input>
            <input type="checkbox"> - Twitter  <hr>
            <input type="checkbox"> - Linked in <hr>
            </br></br>

    </div> <!--your content end-->

</div>

CSS：

.center{
  margin: 0 auto;
  background-color: #EDEFF1; 
  height:300px;
  width:450px; 
  -moz-border-radius-bottomright: 15px; 
  border-bottom-right-radius: 15px; 
  -moz-border-radius-bottomleft: 15px; 
  moz-border-radius-topleft: 15px;
  moz-border-radius-topright: 15px; 
  border-bottom-left-radius: 15px; 
}
于 2013-10-09T07:12:08.870 回答
1

不太清楚为什么你看不到你在 textarea 中写的文字，我可以。我建议您更改以下样式的样式：

 .center{
        position: absolute;
        height:300px;
        width:500px;
        margin: -150px 0 0 -250px;
        top: 50%;
        left: 50%;
        background-color: #EDEFF1;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        -moz-border-radius-bottomright: 15px;
        -moz-border-radius-bottomleft: 15px;
        -moz-border-radius-topleft: 15px;
        -moz-border-radius-topright: 15px;
    }

这应该可以解决中心问题，并且由于您有一个带有样式描述的类，我建议将所有样式选项放在那里，我的意思是

<div id="toPopup" class="center"  style="background-color: #EDEFF1; height:300px;width:500px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px; moz-border-radius-topleft: 15px;moz-border-radius-topright: 15px; border-bottom-left-radius: 15px; ">

应该变得公正

<div id="toPopup" class="center"  >
于 2013-10-09T07:36:46.840 回答
0

消除

position: absolute;

并添加

margin:0 auto;

更新 jsfiddle 链接：http: //jsfiddle.net/UD3U7/3/

于 2013-10-09T08:32:47.177 回答