1. 基础外观

    这是一个弹窗
    表格 表格 表格 表格
    表格 表格 表格 表格
    表格 表格 表格 表格
    表格 表格 表格 表格
    表格 表格 表格 表格
    <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>
    
  2. 扩展外观

    1. 添加按钮

      这是一个弹窗
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      <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>
      
    2. 隐藏标题栏

      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      <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>
      
    3. 宽度设置

      这是一个弹窗
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      <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+ 的分辨率下能正常使用,如需要自适应,可使用百分比进行设置。

    4. 高度设置

      这是一个弹窗
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      <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 组件协作使用。

      【注】高度设置后其位置仍然垂直居中,高度若超过屏幕高度则会显示相应的滚动条。

    5. 可拖曳弹窗的鼠标悬移效果请将鼠标移到标题上查看效果

      这是一个弹窗
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      <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>
      
    6. 加入控制高宽的句柄

      这是一个弹窗
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      表格 表格 表格 表格
      <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>
      
    7. 最小化状态

      这是一个弹窗
      <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>