layui弹出层表单

弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端.

现在用layui来实现一下这个表单吧.

html

  

    输入框
    

      
    
  
  

    密码框
    

      
    
    
辅助文字
  
  

    选择框
    

     
  请选择
  
    你工作的第一个城市？
  
  
    你的工号？
    你最喜欢的老师？
  

    
  
  

    复选框
    

      
      
      
    
  
  

    开关
    

      
    
  
  

    单选框
    

      
      
    
  
  

    文本域
    

      
    
  

提交

js

layer.open({
 type:1,
 area:['500px','600px'],
  title: 'tianxie'
  ,content: $("#test"),
  shade: 0,
  btn: ['提交', '重置']
  ,btn1: function(index, layero){
  var kk=$("#username").val();
  alert(kk);
  },
  btn2: function(index, layero){
   alert("2222");
   return false;
  },
cancel: function(layero,index){ 
   layer.closeAll();
  }

}); 

效果图