`}模态窗口样式如下：.box{position:absolute;width:100px;height:100px;background-color:cadetblue;}.modal{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);}整个模态窗口绝对定位，left,right,top,bottom全部设置为0，背景色为黑色半透明。达到想要的效果效果，点击按钮，模态窗口覆盖了整个页面。现在运行一下，我们会发现模态窗口只覆盖了#box元素，因为#box本身是绝对定位的，模态窗口元素是它的child节点，所以modalwindow只有#box元素被覆盖了。在学习telepor之前t，我们会在根节点定义一个模态窗口，并在业务组件中调用它。但是这样的话，组件的逻辑和模态窗口会有分离感。有什么办法可以让我在这个组件中写模态窗口，但是当它真正呈现在页面上时，可以动态插入到元素中？其实是有的，我们只需要简单的修改模板template，这个需求就可以完成。template:`显示模态窗口模态窗口