Soldierdevil, two ways, first is the CSS solution:
filter <img src="/.s/sm/1/tongue.gif" border="0" align="absmiddle" alt="tongue" /> rogid <img src="/.s/sm/1/biggrin.gif" border="0" align="absmiddle" alt="biggrin" /> XImageTransform.Microsoft.Blur(PixelRadius='3');
The second would be to blur a generic graphic in an image editor like Photoshop then set the opacity to 95% or the like so it looks like the colours are coming through and set it as the background image to the "shade" or relevant class.
Creating the modal itself you can find lots of information on by looking it up in Google. If you're after a framework to help you do this I recommend jQuery UI or Vue. If you're working with Bootstrap check out Angular's Bootstrap UI integrations.
Hope this helps.