Modal模拟态

  1. Toast 



    <div class="bx-toast">轻提示</div>
<div class="bx-toast bx-toast--success"><i class="bx-icon"></i>成功提示</div>
<div class="bx-toast bx-toast--error"><i class="bx-icon"></i>失败提示</div>
<div class="bx-toast bx-toast--warn"><i class="bx-icon"></i>警示提示</div>
  2. 通用Modal 
    <div class="bx-modal-panel">
<div class="bx-modal-overlay"></div>
<div class="bx-modal">
 <div class="bx-modal-header">
   <div class="bx-modal-close"><i class="bx-icon"></i></div>
   <div class="bx-modal-title">温馨提示</div>
 </div>
 <div class="bx-modal-body">
   <div class="bx-modal-inner">
     <div class="bx-modal-title">标题</div>
     <div class="bx-modal-content">补充说明正文</div>
   </div>
 </div>
 <div class="bx-modal-footer">
   <div class="bx-modal-buttons">
     <a class="bx-modal-btn">取消</a>
     <a class="bx-modal-btn bx-modal-link">确定</a>
   </div>
 </div>
</div>
</div>
  3. Alert 

    <!--带标题Alert-->
<div class="bx-alert">
<div class="bx-modal-overlay"></div>
<div class="bx-modal">
 <div class="bx-modal-header">
   <div class="bx-modal-title">标题</div>
 </div>
 <div class="bx-modal-body">
   <div class="bx-modal-inner">
     <div class="bx-modal-content">带标题Alert</div>
   </div>
 </div>
 <div class="bx-modal-footer">
   <div class="bx-modal-buttons"><a class="bx-modal-btn bx-modal-link">知道了</a></div>
 </div>
</div>
</div>
<!--普通Alert-->
<div class="bx-alert">
<div class="bx-modal-overlay"></div>
<div class="bx-modal">
 <div class="bx-modal-body">
   <div class="bx-modal-inner">
     <div class="bx-modal-content">普通Alert</div>
   </div>
 </div>
 <div class="bx-modal-footer">
   <div class="bx-modal-buttons"><a class="bx-modal-btn bx-modal-link">知道了</a></div>
 </div>
</div>
</div>
  4. Dialog 

    <!--带标题Dialog-->
<div class="bx-dialog">
<div class="bx-modal-overlay"></div>
<div class="bx-modal">
 <div class="bx-modal-header">
   <div class="bx-modal-title">标题</div>
 </div>
 <div class="bx-modal-body">
   <div class="bx-modal-inner">
     <div class="bx-modal-content">带标题Dialog</div>
   </div>
 </div>
 <div class="bx-modal-footer">
   <div class="bx-modal-buttons"><a class="bx-modal-btn">取消</a> <a class="bx-modal-btn bx-modal-link">确定</a>
   </div>
 </div>
</div>
</div>
<!--普通Dialog-->
<div class="bx-dialog">
<div class="bx-modal-overlay"></div>
<div class="bx-modal">
 <div class="bx-modal-body">
   <div class="bx-modal-inner">
     <div class="bx-modal-content">普通Dialog</div>
   </div>
 </div>
 <div class="bx-modal-footer">
   <div class="bx-modal-buttons"><a class="bx-modal-btn">取消</a> <a class="bx-modal-btn bx-modal-link">确定</a>
   </div>
 </div>
</div>
</div>
  5. Picker 
    <div class="bx-picker-panel">
<div class="bx-picker-overlay"></div>
<div class="bx-picker">
 <div class="bx-picker-header"><a class="bx-picker-action bx-picker-close">关闭</a> <a
   class="bx-picker-action bx-picker-confirm">确定</a></div>
 <div class="bx-picker-body">
   <div class="bx-picker-group">
     <div class="bx-picker-group-mask"></div>
     <div class="bx-picker-indicator"></div>
     <div class="bx-picker-content">
       <div class="bx-picker-item">浙江省</div>
       <div class="bx-picker-item">福建省</div>
       <div class="bx-picker-item">江苏省</div>
       <div class="bx-picker-item">广东省</div>
       <div class="bx-picker-item">山东省</div>
       <div class="bx-picker-item">安徽省</div>
       <div class="bx-picker-item">陕西省</div>
       <div class="bx-picker-item">河南省</div>
       <div class="bx-picker-item">河北省</div>
     </div>
   </div>
   <div class="bx-picker-group">
     <div class="bx-picker-group-mask"></div>
     <div class="bx-picker-indicator"></div>
     <div class="bx-picker-content">
       <div class="bx-picker-item">杭州市</div>
       <div class="bx-picker-item">绍兴市</div>
       <div class="bx-picker-item">温州市</div>
       <div class="bx-picker-item">宁波市</div>
       <div class="bx-picker-item">丽水市</div>
       <div class="bx-picker-item">温岭市</div>
       <div class="bx-picker-item">嘉兴市</div>
     </div>
   </div>
 </div>
</div>
</div>

results matching ""

    No results matching ""