bootstrap4.4版本感觉是所有版本中最好用的，可以使用modal来制作点击按钮弹出一个窗口，再点击页面任何位置可以自动关闭，同时在弹出窗口上显示关闭的按钮，支持PC、手机屏幕响应式自适应宽度，很不错，下面是演示。
点击弹出一个窗口这个点击弹出一个窗口的需求主要用于那种带提示的按钮或者上图中这种需要快速了解产品介绍的地方，一般单纯的PC端可以使用js插件来实现，但是如果需要自适应多终端就有单麻烦。
借助bootstrap的强大自适应功能，先限定最外层容器的宽度，然后调用数据就能实现，放上演示图片的实现代码。
实现代码：
ulclass=list-inlineoverflow-autoliclass=list-inline-itemspandata-toggle=modaldata-target=#ytlzyzdimgsrc={dede:global.cfg_templets_skin/}/images/ytl-zd.pngalt=专业指导title=1.专业指导，点击可快速查看/spandivclass=col-12px-0text-centerahref={dede:global.cfg_basehost/}/a/ytl1.htmltarget=_blank穿衣/a/div/li/uldivclass=modalfadeid=ytlzyzdtabindex=-1role=dialogaria-labelledby=exampleModalScrollableTitlearia-hidden=truedivclass=modal-dialogmodal-dialog-scrollablerole=documentdivclass=modal-contentdivclass=modal-headerh5class=modal-titleid=exampleModalScrollableTitle1.专业指导/h5buttontype=buttonclass=closedata-dismiss=modalaria-label=Closespanaria-hidden=truetimes;/span/button/divdivclass=embed-responsiveembed-responsive-16by9iframeclass=embed-responsive-itemsrc={dede:global.cfg_basehost/}/a/ytl11.html/iframe/div/div/div/div重点解释：
如果是直接使用，代码拷贝过去修改第2行井号后面的“ytlzyzd”和第4行中的ID保持一致，然后第11行中的iframe是引用的一个网页，如果需要直接显示文字或图片，把ifream替换成div即可；第10行代码embed-responsive-16by9中16by9指的是iframe使用16:9的宽高比例，而且是响应式的。
其他代码无需修改，直接使用即可，把图片地址和文字修改成自己的，就完成了全部制作。