1. 首頁
  2. 問答
  3. div內容中的文本無法正常顯示

div內容中的文本無法正常顯示

2013-10-09 40 views
0

這裏是我的html代碼，其中的內容沒有出現在我的div中。 Tetxtarea，複選框可以看到，但我寫的文字無法看到。div內容中的文本無法正常顯示

另外我寫的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無法看到。

來源

2013-10-09 Programming_crazy

+2

提供有關問題的的jsfiddle代碼，而不是完整的HTML代碼。 – Nitesh

回答

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-09 07:00:38

+0

沒有改進。位置已更改，但尚未位於中央。而且文字也不可見。 –

+0

現在檢查小提琴並告訴需要完成的更改。 –

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-09 07:12:08 Stellaire

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-09 07:36:46 cur4so

相關問題

 相關問題