Question

所以我使用的是lightbox（它基本上是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

你的意思是：


//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 2

试试这个：在你的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();

     });
});

Answer 3

使用您编写的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');

});

如何隐藏#id对象

3 个答案: