弹框内容:
<div class='boxy' style="display:none;" id="boxy"> //将div设置成隐藏效果
<form id='jvForm' method='post' action='/fcms/LoginAloneSubmit.jspx' target='loginframe' onsubmit='return checkInfo();'>
<div class='boxy-div1'>
用户名:<input id='username' class='input1' name='username' type='text' style='color:#666666' />
</div>
<div class='boxy-div1'>
密 码: <input id='password' type='password' class='input1' name='password'/>
</div>
<div class='boxy-div2'>
使用其他网站账号登录:
<a href='/sites/login/weibo1.htm' target='_blank'><img src='/image/sinalogo.png' width='20px' height='20px'/></a>&nbsp;
<a href='/sites/login/qq1.htm' target='_blank'><img src='/image/qqlogo.png' width='20px' height='20px'/></a><br/>
<input type='hidden' name='redirectUrl' value='http://${web.domain}/lala/LaTopicDetail.htm?fid=${fid}&aid=${aid}'/>
<input type='submit' class='btn1' value='登&nbsp;&nbsp;录'/>
<input id='cancer' type='button' class='btn1' value='取&nbsp;&nbsp;消'/>
</div>
</form>
</div>

补充:为了更好的调试页面上JS效果,可以在html页面内的JS脚本里加入

console.log(document.getElementById("boxy"));

接下来引入artDialog.js和default.css,然后呢就是如何使用插件了。

$("#login").bind("click",function(){
var dialog = art.dialog();
dialog.title('快捷登录');
dialog.lock(true);
dialog.content(document.getElementById("boxy"));
$("#cancer").click(function (){
dialog.close();
});
});

artDialog自定义弹框的更多相关文章

  1. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  2. RN code push自定义弹框

    最近在弄react native的code push热更新问题.开始是用的后台默默更新配置.由于微软服务器速度问题,经常遇到用户一直在下载中问题.而用户也不知道代码需要更新才能使用新功能,影响了正常业 ...

  3. vue自定义弹框

    vue 全局自定义简单弹框 https://www.jianshu.com/p/1307329aa09e https://www.cnblogs.com/crazycode2/p/7907905.ht ...

  4. html自定义弹框

    一.要实现的功能 1.弹框弹出时有遮罩 2.弹框内的文字过多时右侧有滚动条 3.根据执行结果变更弹框title的样式   二.具体实现 思路:定义一个有宽高的div,默认隐藏,当要显示时,设置为dis ...

  5. swift 自定义弹框

    // //  ViewController.swift //  animationAlert // //  Created by su on 15/12/9. //  Copyright © 2015 ...

  6. android之自定义弹框

    step1 创建窗体 final AlertDialog dialog =new Builder(this).create(); step2 获取View View viewDialog =View. ...

  7. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  8. 考拉Android统一弹框

    作者:钱成杰 背景 在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式.其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalA ...

  9. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

随机推荐

  1. Spring Ajax一个简单样例

    配置不说了.要在前面helloworld的样例基础上弄. 相同在hello下新建ajax.jsp <%@ page language="java" contentType=& ...

  2. 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  3. plsql连接oracle数据库

    步骤 (1)线上安装oracle数据库(已配好) (2)本地远程连接.安装oracle客户端(运行时) (3)安装plsql. (4)oracle客户端可以不用配置,直接在plsql中数据访问验证

  4. mysqli 实例

    1.封装数据库连接(connect.php): <?php // 封装数据库连接 // 设置页面编码声明 header("Content-type: text/html; charse ...

  5. Spring整合Activiti工作流

    代码地址如下:http://www.demodashi.com/demo/11911.html 一. 前期准备 安装必要的开发环境 eclipse/intellij+maven 3.5.x + tom ...

  6. Android模拟器Genymotion安装apk

    一.下载apk 选择你需要安装的apk进行下载,下载完以后放在与adb.exe同一目录下: 看我的 二.安装apk遇到的问题 开启Genymotion模拟器,然后cmd到你的platform-tool ...

  7. curl Error : maximum redirects followed , 这种问题的一种原因 .

    在stack overflow 上查找到有些网站上需要返回一些cookie的,所以当我们curl当相应的网站时,必须要将返回的cookie保存起来. $cookie = tempnam (" ...

  8. Atitit.android webview h5运行环境总结

    Atitit.android webview h5运行环境总结 1. WebView 的使用1 2. Js调用java1 3. Js调用java 跟个swt的比较2 3.1. Swt是BrowserF ...

  9. INSERT 失败,因为下列 SET 选项的设置不正确: 'ARITHABORT'

    当你在SQL Server上试图更新一个索引视图引用的表时,你可能回收到如下有错误 INSERT 失败,因为下列 SET 选项的设置不正确: 'ARITHABORT' 你必须在TSQL前Set ARI ...

  10. JsCal( JS Calendar)

    http://www.dynarch.com/projects/calendar Doc: http://www.dynarch.com/jscal/ This is the documentatio ...