当我点击任何股利，只有DIV必须拿出休息页的所有内容应该是重叠

-1

我有一个情况有些这样的事当我点击任何股利，只有DIV必须拿出休息页的所有内容应该是重叠

<div id="my div"> 
    <div> 
     content of div 1 
    </div> 
    <div> 
     content of div 2 
    </div> 
    <div> 
     content of div 3 
    </div> 
</div>

出这三个div的，如果我点击在他们中的任何一个上，只有那个特定的div（我点击了）必须冒出来，所有页面的其余部分都应该在背景中显示为叠加。

与此一起，我应该能够将该叠加背景上突出显示的div拖动到任何我想要的位置。

任何一个可以建议我一些解决方案，这样做....

来源

2013-07-30 John Krishna

你可以用Javascript或Jquery实现这个http://www.w3schools.com/jquery/jquery_hide_show.asp – designtocode

我不想隐藏我剩余的页面内容，它应该显示在弹出警告弹出窗口时显示在背景中。 –

我的回答是否帮助你@John Krishna？ –

http://jsfiddle.net/fa7d0/BqsdE/

，你可以设置其他两个div（例如0.2）

的JavaScript的不透明度：

$("#div1").click(function(){ 
    $("#div2").css('opacity','0.2'); 
    $("#div3").css('opacity','0.2'); 
}); 
$("#div2").click(function(){ 
    $("#div1").css('opacity','0.2'); 
    $("#div3").css('opacity','0.2'); 
}); 
$("#div3").click(function(){ 
    $("#div2").css('opacity','0.2'); 
    $("#div1").css('opacity','0.2'); 
}); 

$(".div").each(function(){ //reset all 
    $(this).css('opacity','1.0'); 
});

HTML：

<div id="mydiv"> 
<div id='div1' class='div'> 
    content of div 1 
</div> 
<div id='div2' class='div'> 
    content of div 2 
</div> 
<div id='div3' class='div'> 
    content of div 3 
</div> 
</div>

可以使用例如使用时重置所有功能点击出三个div

来源

2013-07-30 09:56:43

不透明度，它只会减少不透明度，但不会使页面的其余部分不活动。 –

http://stackoverflow.com/questions/17817962/css-opaque-overlay-with-transparent-div-sections/17818221#17818221 – 2013-07-30 10:07:11

如果您创建了div覆盖图，页面的其余部分将处于非活动状态：http： //jsfiddle.net/fa7d0/qSndv/ – 2013-07-30 10:48:02

尝试使用jQuery UI。
另请参阅此documentation页面以获取帮助。
拖动看到这page，它真的帮了我。
这是源代码形式的网站： -

<!doctype html> 

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Draggable - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<style> 
#draggable { width: 150px; height: 150px; padding: 0.5em; } 
</style> 
<script> 
$(function() { 
    $("#draggable").draggable(); 
}); 
</script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
<p>Drag me around</p> 
</div> 


</body> 
</html>

用于缩放一个div使用本： -

#div_id:hover 
{ 
    zoom:30%; 
    }

也看到这个page。

来源

2013-07-30 09:33:28

雅可拖动是好的，但我仍然无法弄清楚如何只带一个div在他们和其他页面覆盖。 –

对不起，变焦不适合我的要求。 –

当我点击任何股利，只有DIV必须拿出休息页的所有内容应该是重叠

回答

相关问题