CSS和jQuery弹出层可以让网页更加灵活，具有更好的用户体验。下面我们分别来介绍一下它们的使用方法。

CSS弹出层是利用CSS的Fixed定位，把一个DIV框架作为弹出层，并设置z-index值让弹出层覆盖页面上的其他元素。下面是一个CSS弹出层的代码示例：

//HTML
<button id="openModal">打开弹出层</button>
<div id="modal">
<div id="modalContent">
<h2>弹出层标题</h2>
<p>弹出层内容</p>
<button id="closeModal">关闭弹出层</button>
</div>
</div>
//CSS
#modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
}
#modalContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
}

jQuery弹出层可以用第三方插件实现，比如Bootstrap、jQuery UI等。下面是一个使用jQuery UI Dialog组件的代码示例：

//HTML
<button id="openDialog">打开弹出层</button>
//JS
$(function() {
$("#openDialog").click(function() {
$("#dialog").dialog("open");
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "弹出层标题",
buttons: {
"确定": function() {
$(this).dialog("close");
}
}
});
});
//CSS
/* 需要添加jQuery UI默认的CSS文件 */

总之，无论使用CSS还是jQuery实现弹出层，都需要注意弹出层的设计是否符合用户习惯，并且在使用时需要避免出现弹出层叠加等问题，以保证良好的用户体验。