CSS控件的模态窗口弹出后只能点击窗口部分不能点击其余部分是怎么实现的呢？

这种效果可以通过使用CSS3的伪元素:before和:after来实现。

具体实现步骤如下：

1. 在HTML中添加一个包裹弹出窗口的div，并给它一个class名，如"modal-container"。

2. 使用CSS设置这个div的宽高、背景色、位置等样式，并设置它的z-index属性值比其他元素都高，这样它就能覆盖在其他元素之上。

3. 使用:before和:after伪元素创建两个透明的层，分别放在弹出窗口的上方和下方。这两个层的宽高和位置应该和弹出窗口一样，并且需要设置z-index属性值比弹出窗口小。

4. 给这两个伪元素添加事件监听器，当用户点击它们时，关闭弹出窗口。

这样就可以实现点击弹出窗口以外的区域时，弹出窗口不会关闭，只有在点击两个透明层时才会关闭。