当前位置：文江博客话题详情

JS 弹出元素使周围站点变暗

发布于 2024-09-07 14:57:46 字数 175 浏览 5 评论 0原文

我不太确定如何描述我想做的事情，但我确信我以前在很多网站上见过它。

基本上，当有人单击链接时，它应该显示一个包含一些文本的元素，并调暗网站的其余部分，以便用户的焦点指向该元素。它也不应该让用户单击灰色区域，因为通知需要确认才能发送。

我在我的网站上使用 jQuery，所以如果它更容易的话我很乐意使用它。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

以为你会在 2024-09-14 14:57:46

jQuery UI 的 dialog 小部件在“模态”模式下打开时将使用“半透明”背景。

html:

<div id='test' title='test'>Test!</div>

javascript:

$('#test').dialog({modal: true});

演示此处

jQuery UI's dialog widget will use a 'semi-transparent' background when opened in 'modal' mode.

html:

<div id='test' title='test'>Test!</div>

javascript:

$('#test').dialog({modal: true});

Demo here

回复收藏 0 原文

混吃等死 2024-09-14 14:57:46

添加额外的 div 来覆盖内容。遮罩应放置在除要弹出的控件之外的所有元素的顶部。使用下面的jquery代码，可以实现这个功能。假设新添加的控件（div）的 id='mask'

.........
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect     
$('#mask').fadeIn(1000);    
$('#mask').fadeTo("slow",0.5);
......

add an extra div to cover the content. The mask should be placed on top of all elements except the control that is to be popped up. Using the jquery code below, this functionality can be achieved. Assuming the newly added control(div) is having id='mask'

.........
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect     
$('#mask').fadeIn(1000);    
$('#mask').fadeTo("slow",0.5);
......

回复收藏 0 原文