Jquery仿模态对话框插件Remodal

1、CSS中引用remodal.css、remodal-default-theme.css

2、JS中引用remodal.js

3、

<a href="#modal">点我</a>

<div class="remodal" data-remodal-id="modal">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>Remodal</h1>
    <p>
        Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
    </p>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

4、背景div加上 class="remodal-bg"有模糊效果

附件:remodal.css 、 remodal-default-theme.cssremodal.js

时间: 2024-08-11 21:50:25

Jquery仿模态对话框插件Remodal的相关文章

Sweetalert模态对话框插件与AdminLTE后台管理模板地址

Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址:https://adminlte.io/ 原文地址:https://www.cnblogs.com/jingxuan-li/p/9478260.html

10 Jquery UI Dialog 对话框插件

原文地址:https://www.cnblogs.com/springsnow/p/9461720.html

【精品推荐】web开发人员应该知道的31个jQuery模态对话框

在网站开发中经常会用到模态窗口,如果直接利用javascirpt的window.showModalDialog()打开一个模式窗口,虽然实现了模式窗口的功能,但十分的不好看.当我们遇到这样的需求时很多人会从网上寻找这些jQuery的模态对话框,有时候搜索了很多,但都不是很合适,那为什么人们喜欢模态窗口呢?那模态窗口到底有什么优点呢? 当一个模态窗口包含一个较小的元素时,用户并不需要加载一个完成的全新新页面就可以访问它.(达到同样效果的另一种方式来是使用基于AJAX的标签) . 通过模态窗口,您提

基于bootstrup的jQuery多功能模态对话框

这是一款非常实用的基于bootstrup的jQuery多功能模态对话框插件.该jQuery模态对话框集警告框.确认框和对话框于一体.是一款不可多得的多功能.多用途的模态对话框插件. 它的主要特点有: 可以通过AJAX直接将调用内容到对话框中. 可以在指定的时间后自动关闭对话框. 可以设置为点击模态背景不关闭对话框. 拥有丰富的回调函数. 在线演示:http://www.htmleaf.com/Demo/201502141378.html 下载地址:http://www.htmleaf.com/j

炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件

多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一下程序最后的效果图片吧 下面是HTMl代码 <center> <button id="test1">alert方式调用</button> <br/><br/> <button id="test2">

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

用jQuery写了一个模态框插件

用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true); "alert

jQuery仿Android锁屏图案应用插件

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery仿Android锁屏图案应用插件DEMO演示</title> <link href="css/patternLock.css" rel="stylesheet" type="text/css" /> <scr

jQuery和CSS3全屏带过渡动画效果的模态窗口插件

animatedModal.js是一款效果非常炫酷的jQuery和CSS3全屏带过渡动画的模态窗口特效插件.该模态窗口插件和animate.css完美结合,你可以使用animate.css中的任何动画效果来制作该模态窗口的过渡动画效果. 在线演示:http://www.htmleaf.com/Demo/201503031453.html 下载地址:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201503031452.html