使用jquery-confirm实现移动端简单信息弹窗

首先,使用一个插件需要导入插件:本来想直接给的,但是不想让你们不思考,不学习,所以请自己去官网下,查看其他特效

<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>

需要一个按钮来启动:

<div class="col">
   <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
   <button class="btn btn-success ibtn" id="followBtn">关注</button>
</div>

js代码:需导入jquery

$("#followBtn").click(function () {
             $.confirm({
                 animation: 'right',
                 closeAnimation: 'right',
                 animationSpeed: 1000
             });

         });
$("#letterBtn").click(function () {
             $.confirm({
                 title: '私信内容',
                 content: '' +
                 '<form action="" class="formName">' +
                 '<div class="form-group">' +
                 '<label>请在这里输入您的私信内容(不得大于15字符)</label>' +
                 '<input type="text" placeholder="请输入私信内容" class="name form-control" required maxlength="15"/>' +
                 '</div>' +
                 '</form>',
                 buttons: {
                     formSubmit: {
                         text: '确认',
                         btnClass: 'btn-blue',
                         action: function () {
                             var name = this.$content.find('.name').val();
                             if(!name){
                                 $.alert('至少输入一个字段');
                                 return false;
                             }
                             $.get("/users/"+user.id+"/"+params.id+"/"+name+"/letters",function (data) {
                                 if (data.success){
                                     window.location.reload();
                  }else {
                                     $.alert(data.msg);
                  }
                             })

                         }
                     },
                     关闭: function () {
                         //close
                     },
                 },
                 onContentReady: function () {
                     // bind to events
                     var jc = this;
                     this.$content.find('form').on('submit', function (e) {
                         // if the user submits the form by pressing enter in the field.
                         e.preventDefault();
                         jc.$$formSubmit.trigger('click'); // reference the button and click it
                     });
                 }
             });
         });

效果图: