如何使用javascript和CSS创建模态弹出窗口 [英] How to create a modal popup using javascript and CSS
本文介绍了如何使用javascript和CSS创建模态弹出窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
其实,有两个问题:
- 如何创建一个背景颜色为灰色的模态弹出窗口?
- 此外,我需要为表格本身创建一个封面背景颜色。不是整个页面。
如何使用javascript和css?
How do I do this using javascript and css?
推荐答案
这里是HTML,应该插入JS,样式应该在外部样式表中。
Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
然后,您可以利用jQuery来显示它。
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
这只是一个开始,你需要从中学习,例如,脚本应该检查是(':hidden')
并显示,如果没有,则 fadeOut(800)
或类似。
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden')
and show, and if not then fadeOut(800)
or similiar.
这篇关于如何使用javascript和CSS创建模态弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文