div内容中的文字显示不正确
[英]Text in the div content does not appear properly
问题描述
这是我的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链接：
在jsfiddle上，它显示文本。 实际上，div应该弹出而不是直接出现。 可以在jsfiddle上看到。
但是在我的localhost文本中看不到。
4 个解决方案
解决方案1
2 2013-10-09 07:00:38
检查一下。 对于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>
解决方案2
1 2013-10-09 07:12:08
我不确定您对“看不到我写的任何文本”的意思，但我已经修复了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;
}
解决方案3
1 2013-10-09 07:36:46
我不太确定为什么看不到在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" >
解决方案4
0 2013-10-09 08:32:47
Angular UI树内容显示不正确
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.