浮动div周围的昏暗区域

Question

I am pretty good at html and css, but horrible at Javascript.

This is the HTML coding I have:

<script>
var toggle = function() {
var mydiv = document.getElementById('nodate');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>

<div id="nodate" style="display:none"><span class="A"> <input type="image" src="http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/close-icon.png?1384992227202" width="42" onclick="toggle();" /></span><b>There are no reservations listed under the date you selected. </b>Please select another date or ask for assistance.<br><br><image src=”http://www.weebly.com/uploads/1/6/7/6/16768236/custom_themes/307429121386408805/files/sorry.jpg?1384992565622” width=”200”/></div>

This CSS code goes along with it:

#nodate {
background-color: #fff;
width: 95%;
height-min: 300px;
z-index: 500;
border: 2px solid #000;
padding: 10px;
margin-left: auto;
margin-right: auto;

position:absolute;
top: -10px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}


.A {
float: right;
margin-top: -30px;
margin-right: -30px;
}

When the dIV is launched, it covers a portion of the page but I want it to dim the area surrounding it. What is the simplest way and how do I do it (if using Javascript, please help me out)

Answer 1

Sounds to me like you're trying to build a modal pop up.

You could build that yourself in Javascript of course, but my advice would be to investigate a library to do it for you.

jQuery is a good choice, and jQuery UI comes with a dialog box which will do exactly what you want. It's quite straightforward, and being jQuery, you'll be able to find plenty of help online.

http://jqueryui.com/dialog/#modal

Answer 2

The question you have asked seems not be related to the JavaScript. The JavaScript code in the question only shows the element, how the element looks like and where it is placed is specified by the corresponding CSS rules. So we f you quite OK with the HTML and CSS it is better to position the element accordingly, then hide it and display using the JavaScript code.

Answer 3

Why do you need JAVA?

For stuff on CSS fading check this out

click here :P

Or maybe start thinking more like this

#page-cover {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
z-index: 999;
top: 0;
left: 0;
}