Overlay javascript image on specific div

Question

I am new to javascript. very new in fact, this should be my first script. can someone explain to me how to make a transparent overlay over any given area of ​​a fixed width, say 700x300px.

Answer 1

You can define an overlay, for example

<div id="myoverlay" class="myoverlay">...contents...</div>

and determine the size and position and z-index, etc. in CSS

.myoverlay {
   position: absolute;
   display: none;
   ...
}

I don’t see the need for JavaScript yet, but I think you'll want to use JS to turn on / off the overlay display attribute.

<script type="text/javascript">
function showOverlay(){
  document.getElementById("myoverlay").style.display = "block";
}
</script>

, ? , . .

Answer 2

div .

var shimDiv = document.createElement('div');  
shimDiv.id = 'shim';  
shimDiv.style.position = 'absolute';  
shimDiv.style.top = 0;  
shimDiv.style.left = 0;  
shimDiv.style.width = "700px";  
shimDiv.style.height = "300px";  
shimDiv.style.backgroundColor = '#000'; 
shimDiv.style.zIndex = 3;   

, IE, :

shimDiv.style.opacity = '0.75'; 

IE , :

shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';  

div :

document.body.appendChild(shimDiv); 

IE, IFrame DIV.

IFrame JavaScript, :

var iframe = document.createElement('iframe');
iframe.setAttribute("src", "javascript:false");

src IFrame "javascript: false", IFrame ( , , "" ", HTTPS).

IFrame div, z-index.

iframe.style.zIndex = 2;

CSS. , JavaScript.