如何创建漂亮的弹出窗口?

时间:2014-04-23 14:48:10

标签: javascript jquery popup

我的文件.js有以下代码:

 jQuery("body").append('<div id="mask"></div><div id="maskbox1">This popup will be closed after few seconds <br/><button id="maskbutton1">Register</button></div>;
 jQuery("#mask").css({
     'position': 'fixed',
     'z-index': 8000,
     'background-color': '#000',
     'display': 'none',
     'top': 0,
     'opacity': 0.4,
     'filter': 'alpha(opacity=40)'
 });
 jQuery("#maskbox1").css({
     'position': 'fixed',
     'z-index': 9000,
     'background-color': '#fff',
     'display': 'none',
     'top': 0,
     'opacity': 0.9,
     'filter': 'alpha(opacity=90)',
     'padding': '10px',
     'width': '400px',
     'height': '110px'
 });

问题是这个弹出窗口很难看。那么,如何为这个弹出窗口添加标题并使其更美观?

示例:http://webdesigntutsplus.s3.amazonaws.com/tuts/316_modal/source/index.html

非常感谢!

1 个答案:

答案 0 :(得分:0)

您可以使用CSS和HTML以任何方式设置弹出div的样式。我建议通过一个CSS教程,开始解释每个属性以及可能的值是什么,然后从那里开始。

正在显示的div可以像任何其他页面上的任何其他div一样进行编辑。 Here是一个很好的CSS教程示例。或者您可以访问Google,只需输入“学习CSS”或“Css教程”

就您的具体问题而言,提问您希望某人在哪里编辑您的CSS并使其“美丽”的网站格式并不是真的。这就是你的工作,如果你遇到一个特定的问题,那么我们可以帮助你找到解决你特定问题的方法。