新建一个div:

<div class="container" id="loginForm" hidden>
<h4 class="form-signin-heading">用户登录</h4>
<hr />
<div class="form-group">
<input type="text" class="form-control" id="KeyName" placeholder="Auth Key" name="Key">
</div>
<div class="form-group">
<input type="password" class="form-control" id="Pwd" placeholder="Auth Secret" name="Secret">
</div>
<div class="form-group">
<button class="btn btn-large btn-primary" id="btnLogin" onclick="LoginCheck()">登录</button>
</div>
</div>

弹框js写法,可以存放在初始化中:

function showDialogLogin() {
$("#loginForm").dialog({
height: ,
width: ,
// 模态开启
modal: true,
// 是否可拖拽
draggable: true,
// 最小宽度
minWidth: ,
//当用户按 Esc 键之后,是否应该关闭对话框,默认为 true
closeOnEscape: true });
}

获取值登录:

function LoginCheck() {
var key = $("#KeyName").val();
var Secret = $("#Pwd").val();
var data = { key, Secret }
$.ajax({
type: "post",
dataType: "json",
url: '/account/Login',
data: data,
success: function (res) {
if (res.Message == "success") {
$("#loginForm").dialog('close');
}
else {
alert("请重新输入");
}
},
error: function () {
alert("请重新输入");
},
});
};

jquery-ui弹框登录前端写法的更多相关文章

  1. 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态

    在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...

  2. easy ui 弹框叠加问题

    1.框架用的是.net MVC,Index页面如下所示: @{ Layout = "~/Views/Shared/_CustomerLayout.cshtml"; ViewBag. ...

  3. jquery UI 弹出框

    2015-07-17 11:04:38 <div id="reg"></div> <script type="text/javascript ...

  4. jquery Dialog弹框插件

    function Dialog(options) { var defaults = { // 默认值. title: '', // 标题文本,若不想显示title请通过CSS设置其display为no ...

  5. jQuery UI弹出新窗体

    借助jqueryUI 的Dialog 在隐藏的div中嵌入Iframe  改变iframe的路径 如果项目经常用到弹出新窗体,则利用模板,把此代码和html 放入父页面中,实现父级调用, <in ...

  6. jquery Dialog弹框插件使用

    var dialog = new Dialog({ title: '购物车', type: 'url', width: 520, content: "Uplolo.aspx", s ...

  7. jquery widgets 弹框

    <div id='dialog' style="display:none;"> <div style="text-align:center;" ...

  8. jquery ui dialog弹出窗 清空缓存Cache或强制刷新

    我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据.发现购物车被缓存,一直看到是旧数据.为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面.有没有一种方法来自动刷新加载 ...

  9. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

随机推荐

  1. Android开发中遇到的问题(一)——Android模拟器端口被占用问题的解决办法

    一.问题描述 今天在Eclipse中运行Android项目时遇到"The connection to adb is down, and a severe error has occured& ...

  2. 用户人品预测大赛--TNT_000队--竞赛分享

     用户人品预测大赛--TNT_000队--竞赛分享  DataCastle运营 发表于 2016-3-24 14:29:57      887  0  0 答辩PPT 0 回复     用户反馈 隐私 ...

  3. js获取客户端time,cookie,url,ip,refer,user_agent信息:

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type=& ...

  4. 【HTML打印】HTML直接调用window下的打印机并执行打印任务(简单打印任务生成)

    1.<button onclick="preview('data');" id="print">打印</button> 2. 3.js: ...

  5. SNF快速开发平台MVC-Grid++集成打印

    一.显示效果: 二.程序实现: 1.先要在 打印模版程序 给指定页面进行在线设计打印模版 2.在使用的程序当中,增加如下代码即可.程序上是可以挂多个打印模版的,程序页面的代码不用动直接可以读取到打印模 ...

  6. Nginx 日志自动分割

    Nginx 的日志都是写在一个文件当中的,不会自动地进行切割,如果访问量很大的话,将导致日志文件容量非常大,不便于管理和造成Nginx 日志写入效率低下等问题.所以,往往需要要对access_log. ...

  7. Android Studio Prettify 插件

    1.功能:能够一键声明layout文件中的所有注明id的控件,节省时间 2.github地址 https://github.com/Haehnchen/idea-android-studio-plug ...

  8. python thrift使用实例

    前言 Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架.本文将从 Python开发人员角度简单介绍 Apache Thrift 的架构.开发和使 ...

  9. What-is-DevOps

    https://www.quora.com/What-is-DevOps https://neoteric.eu/blog/devops-a-culture-of-getting-things-don ...

  10. pattern-matching as an expression without a prior match -scala

    https://www.scala-lang.org/files/archive/spec/2.11/08-pattern-matching.html https://docs.scala-lang. ...