Javascript 如何创建漂亮的弹出窗口？

我有一个文件.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'
 });

jQuery（“body”）.append（'此弹出窗口将在几秒钟后关闭
注册；
jQuery（“#掩码”）.css({
'位置'：'固定'，
“z指数”：8000，
“背景色”：“000”，
“显示”：“无”，
“顶部”：0，
“不透明度”：0.4，
“过滤器”：“alpha（不透明度=40）”
});
jQuery（“#maskbox1”）.css({
'位置'：'固定'，
“z指数”：9000，
“背景色”：“fff”，
“显示”：“无”，
“顶部”：0，
“不透明度”：0.9，
“过滤器”：“alpha（不透明度=90）”，
“填充”：“10px”，
“宽度”：“400px”，
“高度”：“110px”
});

问题是这个弹出窗口很难看。那么，如何为这个弹出窗口添加标题并使其更漂亮呢

例如：

---

非常感谢！

您可以使用CSS和HTML以任何方式设置弹出式div的样式。我建议您阅读CSS教程，开始解释每个属性以及可能的值，并从中开始

显示在那里的div可以像任何其他页面上的任何其他div一样进行编辑。这是一个很好的CSS教程的示例。或者你可以去谷歌，键入“学习CSS”或“CSS教程”

至于你的具体问题，它不是真正的网站格式来问一个问题，你希望有人编辑你的css，使其“美好”。这是你的工作，如果你陷入了一个特定的问题，那么我们可以帮助你为你的具体问题的解决方案