首先,使用一个插件需要导入插件:本来想直接给的,但是不想让你们不思考,不学习,所以请自己去官网下,查看其他特效
<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 }); } }); });
效果图: