Home/ Questions/Q 8964739
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:39:24+00:00

I would like to drop a shadow / blur the background of the div

  • 0

I would like to drop a shadow / blur the background of the div id = "test" dialog box, I have tried using the jquery ui provided class .ui-widget-shadow / .ui-widget-overlay but it doesn’t seem working properly. Is there any way to achieve this? Thanks.

  <style>
    div {
        display: none;
        width: 90%;
        height: 95%;
        margin-left:5%;
        background: #ccc;
        border: 1px solid #000;
    }

    div img {
        display: inline;
        margin-left:5%;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>

<button>show the div</button>
<div id = 'test'> <img src = 'image.png'></div>

<script>
$( "button" ).click(function() {
    $( "div" ).show( "scale", 180 );
});

$( "#test" ).dblclick(function() {
    $( "#test" ).hide( "scale", 200 );
});

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You haven’t done anything related!

    If you need a drop-shadow for the #test, then you can use this CSS:

    #test {box-shadow: 10px 10px 5px #000;}

    You can generate the code using many online box-shadow generators.

    Else, if you need something like a modal window, which hides or blurs the background, you need to add another div and give z-index, etc. You can see more information from: Simple jQuery Modal Window Tutorial.

    • 0