如何用jQuery实现点击按钮弹出一个盒子，除了这个盒子以外的其他部分颜色全变暗？

Posted 2023-05-15

就是这个效果，弹出的DIV是正常的，其他部分变暗

第一种方式：你使用的现有库中有没有开启和关闭遮罩的api，如果有的话，直接照着api使用即可；
第二种方式：自己写个遮罩。需要两层div标签，遮罩层div标签在下层，内容层div标签在上层，类似如下；
html代码：
<div class="x-mask"></div>
<div class="x-mask-content"></div>
css样式：
.x-maskposition:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:0.5;filter:alpha(opacity=5);z-index:99;
.x-mask-contentposition:fixed;top:0;right:0;bottom:0;left:0;width:600px;height:400px;margin:auto;background-color:#fff;overflow:auto;z-index:100;
第三种方式：找一款遮罩插件，推荐使用jQuery blockUI。 参考技术A $(function()
    function bdclose(id) //自定义一个函数这个函数只关闭弹的窗口，

        $('body').click(funciton() //帮订body事件

            dialogclose(id); //这个就是调用关闭弹窗口的函数
        );
    

);
比如你在<a onclick="showbox();bdcloase(ID);">显示弹窗口</a>

追问

不是将其他地方关闭，是让他们颜色变暗，这样能突出弹出来的div

参考技术B 就是遮罩呗，你用的什么前段框架，没用的话就写一个全覆盖的div，样式加上一个透明度就出差不多了 参考技术C 最外层放一个div盖住，设置半透明就行了本回答被提问者采纳 参考技术D 用dialog直接可以做到这个效果

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

html代码 画个div和button

<div class="abc" style="display:none"></div>
<input type="button" class="but" />

js代码

<script>
$(document).ready(function(e) //DOM加载完成后执行方法
    $(".but").click(function(e) //点击事件
        $(".abc").toggle();//div元素如果是隐藏就会显示，反之显示就会隐藏
    );
);
</script>

注：jquery的toggle() 方法的作用就是当对象是显示的就隐藏，当是隐藏的则显示。

参考技术A $(document).ready(function()
$("#butt").click(function()
$("div").toggle();
);
);
这是基础性的东西。建议你去学学jquery本回答被提问者采纳