如何隐藏#id对象

Question

所以我使用灯箱（它基本上是fancybox），并且我使用了内联功能（因此点击链接并弹出一些文本）。

我定义的文本如下：

<p id="wald" style="width:500px; border:2px solid #ececec; padding:10px; margin-right:auto;margin-left:auto;"> 
<strong>id="loremipsum"</strong> Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque. 
</p> 

但问题是，文本显示了在页面的底部。

我该如何解决这个问题？

Answer 1

隐藏一个对象使用CSS你写

.[class of element] {display:none; } 

#[id of element] {display:none;} 

你也可以使用{visibility:hidden}

使用jQuery你可以用

$(document).ready(function() { 

    //this is used it we want to access multiple style add extra with comma sperated values. 
    $("#[id of element]").css({display:none}); 
    $(".[class of element]").css({display:none}); 

做到这一点

或者您也可以尝试

//this is used it we want to access only one style 
    $("#[id of element]").css('display','none'); 
    $(".[class of element]").css('display','none'); 

}); 

Answer 2

你的意思是：

 

//add display:none, so that its hidden and opens in fancybox when clicked if you have valid code 
<p id="wald" style="width:500px; border:2px solid #ececec; padding:10px; margin-right:auto;margin-left:auto; display:none;"> 
//OR 
<div style="display:none;"> 
<p id="wald" style="width:500px; border:2px solid #ececec; padding:10px; margin-right:auto;margin-left:auto;"> 
</div> 
 

Answer 3

试试这个： 在您的HTML：

<a href="#" id="show_dialog">click this to show dialog</a> 

    <p id="wald" style="width:500px; border:2px solid #ececec; padding:10px; margin-right:auto;margin-left:auto;"> 
<strong>id="loremipsum"</strong> Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque. 
</p> 

然后在你的.js代码键入此。 （你需要jquery做到这一点）

$(document).ready(function(){ 
    $('#wald').hide(); 
    $('#show_dialog').click(function(){ 
      $('#wald').show(); 

    }); 
});