layer弹窗插件留言提交

最新推荐文章于 2024-06-28 19:52:01 发布

335046781

最新推荐文章于 2024-06-28 19:52:01 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yunfly/p/6054605.html

本文介绍了一个利用Layer弹窗插件实现的留言功能。该功能通过iframe方式展示一个包含表单的弹窗，允许用户输入留言标题及内容，并通过Ajax提交至服务器。文章提供了完整的JavaScript代码示例。

function msgShow(getname,getuserid){
     layer.open({
          type: 1 //此处以iframe举例
          ,title: '收件人：'+getname+'(ID:'+getuserid+')'    //弹窗的标题部分（按照需求，传入参数并显示）
          ,area: ['490px', '430px']
          ,shade: 0
          ,offset: [ //为了演示，随机坐标
          ]
          ,maxmin: true
          ,content: '<div class="cl pd-20" style=" background-color:#5bacb6"></div><div class="pd-20 ss ygkoa"><form  method="post">      <label>留言标题：<input id="inputVal" type="text" name="title" value="" class="input-text" required /></label><br/>      留言内容：<textarea name="content" id="textVal" rows="8" cols="72"  required ></textarea><br/></form><p class="ww"></p></div>'
          ,btn: ['发送留言', '取消发送'] //第一个按钮确认，第二个按钮取消
          ,yes: function(){  //按钮一的回调
              var inputVal=$("#inputVal").val();
              var textVal=$("#textVal").val();
              if (inputVal==''||textVal=='') {
                  layer.msg('留言不能为空！(>_<)',{icon: 5});
              }else{
                  $.ajax({    //用ajax把表单数据提交到服务器进行处理
                      type:"post",
                      url:"/Admin/Team/msgsave",
                      data:"title="+inputVal+"&content="+textVal+"&getuserid="+getuserid,
                      success:function(){
                          layer.msg('留言发送成功！(^_^)',{icon: 6});
                      }
                  })
                  layer.closeAll();    //如果设定了yes回调，需进行手工关闭
              }
               
          }
          ,cancel: function(){   //按钮二的回调
            layer.closeAll();
          }
          ,zIndex: layer.zIndex //重点1
          ,success: function(layero,index){ //打开弹窗后的回调
        
          }
        });
}