<div class="c_popup">
<div class="c_popupWrapper">
<div class="c_popupHeight"></div>
<div class="c_popupBox">
<div class="c_popupTitle">
<div class="text">这是一个弹窗</div>
<div class="fn"><a href="#nogo" class="close"></a></div>
</div>
<div class="c_popupContent"><div class="c_popupContentWrapper">
这里可以放置任何组件
</div></div>
<div class="c_popupBottom"><div></div></div>
<div class="c_popupShadow"></div>
</div>
</div>
<iframe class="c_popupFrame"></iframe>
<div class="c_popupCover"></div>
</div>
【注】c_popup 的代码一般情况下必须写在 m_wrapper 之外，与之平级。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head jwcid="@Head"></head> <body jwcid="@Body"> <div class="m_wrapper"><div class="m_wrapper2"> <!-- 页面内容 --> </div></div> <!-- c_popup 的位置 --> </body> </html>
<div class="c_popup"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"> <a class="config" href="#nogo"></a> <a class="refresh" href="#nogo"></a> <a class="min" href="#nogo"></a> <a class="default" href="#nogo"></a> <a class="max" href="#nogo"></a> <a class="close" href="#nogo"></a> </div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> 这里可以放置任何组件 </div></div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>
<div class="c_popup c_popup-notitle"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"><a href="#nogo" class="close"></a></div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> 这里可以放置任何组件 </div></div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>
<div class="c_popup"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox" style="width:300px;"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"><a href="#nogo" class="close"></a></div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> 这里可以放置任何组件 </div></div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>
【注】宽度设置后其位置仍然水平居中，但请勿将其宽度设置过宽，否则会无法显示，最好保证用户在 1024+ 的分辨率下能正常使用，如需要自适应，可使用百分比进行设置。
<div class="c_popup"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"><a href="#nogo" class="close"></a></div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> <div style="height:300px;"> 这里可以放置任何组件 </div> </div></div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>
【注】弹窗的高度本身根据其内容高度自适应，所以将其内容的高度进行设定即保证了弹窗的高度，这种设定一般与<iframe>或 scroll 组件协作使用。
【注】高度设置后其位置仍然垂直居中，高度若超过屏幕高度则会显示相应的滚动条。
<div class="c_popup c_popup-drag"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"><a href="#nogo" class="close"></a></div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> 这里可以放置任何组件 </div></div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>
<div class="c_popup"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"><a href="#nogo" class="close"></a></div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> 这里可以放置任何组件 </div></div> <div class="c_popupHandle"> <div class="t"></div> <div class="r"></div> <div class="b"></div> <div class="l"></div> <div class="lt"></div> <div class="rt"></div> <div class="rb"></div> <div class="lb"></div> </div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>
<div class="c_popup"> <div class="c_popupWrapper"> <div class="c_popupHeight"></div> <div class="c_popupBox"> <div class="c_popupTitle"> <div class="text">这是一个弹窗</div> <div class="fn"><a href="#nogo" class="close"></a></div> </div> <div class="c_popupContent"><div class="c_popupContentWrapper"> 这里可以放置任何组件 </div></div> <div class="c_popupHandle"> <div class="t"></div> <div class="r"></div> <div class="b"></div> <div class="l"></div> <div class="lt"></div> <div class="rt"></div> <div class="rb"></div> <div class="lb"></div> </div> <div class="c_popupBottom"><div></div></div> <div class="c_popupShadow"></div> </div> </div> <iframe class="c_popupFrame"></iframe> <div class="c_popupCover"></div> </div>