Question

我非常擅长html和css，但在Javascript上非常糟糕。

这是我的HTML编码：

<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>

这个CSS代码随之而来：

#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;
}

当启动dIV时，它会覆盖页面的一部分，但我希望它能够调整周围的区域。什么是最简单的方法，我该怎么做（如果使用Javascript，请帮助我）

Answer 1

听起来像你正试图建立一个模态弹出窗口。

你当然可以在Javascript中自己构建，但我的建议是调查一个库来为你做这件事。

jQuery是一个不错的选择，jQuery UI附带了一个对话框，可以完全按照您的意愿进行操作。这很简单，作为jQuery，你将能够在网上找到很多帮助。

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

Answer 2

您提出的问题似乎与JavaScript无关。问题中的JavaScript代码仅显示元素，元素的外观以及放置位置由相应的CSS规则指定。所以我们对HTML和CSS做得很好，最好相应地定位元素，然后使用JavaScript代码隐藏它并显示。

Answer 3

你为什么需要JAVA？

关于CSS衰落的内容，请查看

click here :P

或者可能开始更多地考虑这个

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

浮动div周围的昏暗区域

3 个答案: