jQuery弹框 remodal 插件的使用 官方文档点击这里查看详情
其他相关推荐插件
插件描述：Remodal 是一个扁平化，响应式，轻量，快速，容易定制的模态窗口插件。使用声明式状态符号和哈希（Hash）跟踪。所有现代的浏览器都支持。您可以轻松地定义为模态窗口定义背景容器（如模糊效果）。
1 使用方法
在头部分包含dist文件夹中的CSS文件：
<link rel="stylesheet" href="dist/remodal.css">
<link rel="stylesheet" href="dist/remodal-default-theme.css">
<script src ="dist/remodal.min.js"> </script>
1.1您可以为模态定义背景容器（如模糊效果）。它可以是任何简单的内容包装器：
<div class =“remodal-bg”>
...页面内容...
</ DIV>
2 现在创建模态对话框：
<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>
2.1 不要使用ID属性，如果你想避免锚跳，用data-remodal-id.
所以，现在你可以用哈希函数调用它：
<a href="#modal">Call the modal with data-remodal-id="modal"</a>
或：
<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>
3 您可以使用data-remodal-options属性传递其他选项。
<div class="remodal" data-remodal-id="modal"
data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
<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>
总结 调用方法
<div class="remodal pop_big" data-remodal-id="pop_01_buy">
<span class="pop_tittle">你要購買的商品是</span>
<!--商品-->
<div class="pop_product_box">
<span>商品名稱六字</span>
<div class="product"> <img src="images/icon/Sball.png" alt="">
</div>
<div class="pop_money_box"> <span>需消耗</span> <span>99999</span>
<span>鑽石</span> </div>
<span class="txt_confirm">是否進行購買?</span>
</div>
<div class="btns">
<a data-remodal-action="cancel" class="cancel" href="#"></a>
<a data-remodal-action="confirm" class="confirm" data-remodal-
target="pop_02_buy" href="#"></a>
</div>
</div>
//触发方法
<div class="buy_box" data-remodal-target="pop_01_buy"> </div>
== 第二个插件 message.js ==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/message.js"></script>
<style>
button {padding: 5px 10px;font-size: 16px; background: #ffc107; color: #fff;border: none}
</style>
</head>
<body>
<h2>alert方法</h2>
<button id="alert">点击查看</button>
<div style="padding:20px;background: #efefef">
默认调用：alert('请打开麦克风')
</div>
<br>
<button id="alert2">点击查看</button>
<div style="padding:20px;background: #efefef">
回调函数：alert('请打开麦克风').then(callback)
</div>
<br>
<button id="alert3">点击查看</button>
<div style="padding:20px;background: #efefef">
支持多参数：alert({
title: '我是标题',
content: '请打开麦克风',
doneText: '按钮文字'
}).then(callback)
</div>
<script>
document.getElementById('alert').onclick = function () {
alert('请打开麦克风')
}
document.getElementById('alert2').onclick = function () {
alert('请打开麦克风').then(() => {
console.log('已确认')
})
}
document.getElementById('alert3').onclick = function () {
alert({
title: '我是标题',
content: '请打开麦克风',
doneText: '按钮文字'
})
}
</script>
<br>
<br>
<h2>confirm方法</h2>
<button id="confirm">点击查看</button>
<div style="padding:20px;background: #efefef">
默认调用：confirm('请打开麦克风')
</div>
<br>
<button id="confirm2">点击查看</button>
<div style="padding:20px;background: #efefef">
confirm({
title: '我是标题',
content: '请打开麦克风',
doneText: '确认按钮文字',
cancalText: '取消按钮文字'
}).then(() => {
console.log('已确认')
}).catch(() => {
console.log('已取消')
})
</div>
<script>
document.getElementById('confirm').onclick = function () {
confirm('请打开麦克风').then(() => {
console.log('已确认')
}).catch(() => {
console.log('已取消')
})
}
document.getElementById('confirm2').onclick = function () {
confirm({
title: '我是标题',
content: '请打开麦克风',
doneText: '确认按钮文字',
cancelText: '取消按钮文字'
}).then(() => {
console.log('已确认')
}).catch(() => {
console.log('已取消')
})
}
</script>
<br>
<br>
<h2>toast方法</h2>
<button id="toast">点击查看</button>
<div style="padding:20px;background: #efefef">
默认调用：toast('请打开麦克风')
</div>
<br>
<button id="toast2">点击查看</button>
<div style="padding:20px;background: #efefef">
设置停留时间：toast({time: 5000, content: '停留5秒再消失'})
</div>
<script>
document.getElementById('toast').onclick = function () {
toast('请打开麦克风')
}
document.getElementById('toast2').onclick = function () {
toast({time: 5000, content: '停留5秒再消失'})
}
</script>
</body>
</html>
js部分
/*!
* Message.js v3.2.2
* by 吴长新
*/!function(n){var t={};function e(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=n,e.c=t,e.d=function(n,t,r){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:r})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(r,o,function(t){return n[t]}.bind(null,o));return r},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=1)}([function(n,t){n.exports='<div class="ui__alert_bg in"></div>\n<div class="ui__alert_content in">\n <div class="ui__content_body"></div>\n <div class="ui__content_foot"></div>\n</div>'},function(n,t,e){"use strict";e.r(t);e(2);var r=e(0),o=e.n(r);document.createElement("div").innerHTML=o.a,function(n,t){n.alert=i("alert"),n.confirm=i("confirm"),n.dialog=i("alert");var e=9999,r=t.createElement("style");function i(n){return function(r){"string"==typeof r&&(r={content:r}),!1===r.title&&r.title,r.type=n;var i=t.createElement("div");i.className="ui__alert",i.style.zIndex=e++,i.innerHTML=o.a;var s=`<h4 class="ui__title">${r.title||"友情提示"}</h4>`;s+=`<div>${r.content}</div>`;var c=`<a class="btn_done">${r.doneText||"确认"}</a>`;return"confirm"===r.type&&(c+=`<a class="btn_cancel">${r.cancelText||"取消"}</a>`),i.querySelector(".ui__content_body").innerHTML=s,i.querySelector(".ui__content_foot").innerHTML=c,t.body.appendChild(i),new Promise((n,t)=>{i.querySelector(".btn_done").onclick=function(){a(i),n()},"confirm"===r.type&&(i.querySelector(".btn_cancel").onclick=function(){a(i),t()})})}}function a(n){var e=n.children[0];e.addEventListener("animationend",()=>{t.body.removeChild(n)}),e.addEventListener("webkitAnimationEnd",()=>{t.body.removeChild(n)}),n.children[0].className="ui__alert_bg out",n.children[1].className="ui__alert_content out"}r.innerHTML=".",t.head.appendChild(r),n.toast=function(n){"string"==typeof n&&(n={content:n});var e=t.createElement("div");e.innerHTML=`<div class="ui__toast_bg"></div><div class="ui__toast_text">${n.content}</div>`,t.body.appendChild(e);var r=setTimeout(()=>{clearTimeout(r),t.body.removeChild(e)},n.time||2e3)}}(window,document)},function(n,t,e){var r=e(3);"string"==typeof r&&(r=[[n.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};e(5)(r,o);r.locals&&(n.exports=r.locals)},function(n,t,e){(n.exports=e(4)(!1)).push([n.i,".ui__alert * {\n padding: 0;\n margin: 0;\n}\n.ui__alert .ui__alert_bg {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9998;\n position: fixed;\n background: rgba(0, 0, 0, 0.2);\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n}\n.ui__alert .ui__alert_bg.in {\n -webkit-animation-name: bgFadeIn;\n animation-name: bgFadeIn;\n}\n.ui__alert .ui__alert_bg.out {\n -webkit-animation-name: bgFadeOut;\n animation-name: bgFadeOut;\n}\n.ui__alert .ui__alert_content {\n text-align: center;\n position: fixed;\n min-width: 250px;\n max-width: 280px;\n z-index: 9999;\n background: #fff;\n border-radius: 10px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n -webkit-animation-duration: 500ms;\n animation-duration: 500ms;\n}\n.ui__alert .ui__alert_content.in {\n -webkit-animation-name: contentZoomIn;\n animation-name: contentZoomIn;\n}\n.ui__alert .ui__alert_content.out {\n -webkit-animation-name: contentZoomOut;\n animation-name: contentZoomOut;\n}\n.ui__alert .ui__alert_content .ui__content_body {\n font-size: 14px;\n padding: 18px;\n border-bottom: 1px solid #eee;\n}\n.ui__alert .ui__alert_content .ui__content_body .ui__title {\n margin-bottom: 5px;\n font-size: 16px;\n}\n.ui__alert .ui__alert_content .ui__content_foot {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ui__alert .ui__alert_content .ui__content_foot a {\n font-size: 14px;\n color: #017aff;\n display: block;\n text-decoration: none;\n flex: 1;\n text-align: center;\n line-height: 40px;\n border-left: 1px solid #eee;\n}\n.ui__alert .ui__alert_content .ui__content_foot a:first-child {\n border-left: none;\n}\n.ui__toast_bg {\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9998;\n position: fixed;\n}\n.ui__toast_text {\n line-height: 1;\n text-align: center;\n position: fixed;\n max-width: 200px;\n z-index: 9999;\n padding: 14px;\n color: #fff;\n background: #000;\n border-radius: 5px;\n left: 50%;\n top: 50%;\n font-size: 14px;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n@-webkit-keyframes bgFadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes bgFadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@-webkit-keyframes bgFadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes bgFadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@-webkit-keyframes contentZoomIn {\n 0% {\n -webkit-transform: translate(-50%, -30%);\n transform: translate(-50%, -30%);\n opacity: 0;\n }\n 100% {\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n}\n@keyframes contentZoomIn {\n 0% {\n -webkit-transform: translate(-50%, -30%);\n transform: translate(-50%, -30%);\n opacity: 0;\n }\n 100% {\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n}\n@-webkit-keyframes contentZoomOut {\n 0% {\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translate(-50%, -30%);\n transform: translate(-50%, -30%);\n opacity: 0;\n }\n}\n@keyframes contentZoomOut {\n 0% {\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n 100% {\n -webkit-transform: translate(-50%, -30%);\n transform: translate(-50%, -30%);\n opacity: 0;\n }\n}\n",""])},function(n,t,e){"use strict";n.exports=function(n){var t=[];return t.toString=function(){return this.map(function(t){var e=function(n,t){var e=n[1]||"",r=n[3];if(!r)return e;if(t&&"function"==typeof btoa){var o=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),i=r.sources.map(function(n){return"/*# sourceURL="+r.sourceRoot+n+" */"});return[e].concat(i).concat([o]).join("\n")}var a;return[e].join("\n")}(t,n);return t[2]?"@media "+t[2]+"{"+e+"}":e}).join("")},t.i=function(n,e){"string"==typeof n&&(n=[[null,n,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];null!=i&&(r[i]=!0)}for(o=0;o<n.length;o++){var a=n[o];null!=a[0]&&r[a[0]]||(e&&!a[2]?a[2]=e:e&&(a[2]="("+a[2]+") and ("+e+")"),t.push(a))}},t}},function(n,t,e){var r,o,i={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),s=function(n){var t={};return function(n,e){if("function"==typeof n)return n();if(void 0===t[n]){var r=function(n,t){return t?t.querySelector(n):document.querySelector(n)}.call(this,n,e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(n){r=null}t[n]=r}return t[n]}}(),c=null,l=0,u=[],f=e(6);function d(n,t){for(var e=0;e<n.length;e++){var r=n[e],o=i[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(y(r.parts[a],t))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(y(r.parts[a],t));i[r.id]={id:r.id,refs:1,parts:s}}}}function p(n,t){for(var e=[],r={},o=0;o<n.length;o++){var i=n[o],a=t.base?i[0]+t.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):e.push(r[a]={id:a,parts:[s]})}return e}function m(n,t){var e=s(n.insertInto);if(!e)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=u[u.length-1];if("top"===n.insertAt)r?r.nextSibling?e.insertBefore(t,r.nextSibling):e.appendChild(t):e.insertBefore(t,e.firstChild),u.push(t);else if("bottom"===n.insertAt)e.appendChild(t);else{if("object"!=typeof n.insertAt||!n.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=s(n.insertAt.before,e);e.insertBefore(t,o)}}function _(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n);var t=u.indexOf(n);t>=0&&u.splice(t,1)}function b(n){var t=document.createElement("style");if(void 0===n.attrs.type&&(n.attrs.type="text/css"),void 0===n.attrs.nonce){var r=function(){0;return e.nc}();r&&(n.attrs.nonce=r)}return v(t,n.attrs),m(n,t),t}function v(n,t){Object.keys(t).forEach(function(e){n.setAttribute(e,t[e])})}function y(n,t){var e,r,o,i;if(t.transform&&n.css){if(!(i="function"==typeof t.transform?t.transform(n.css):t.transform.default(n.css)))return function(){};n.css=i}if(t.singleton){var a=l++;e=c||(c=b(t)),r=x.bind(null,e,a,!1),o=x.bind(null,e,a,!0)}else n.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=function(n){var t=document.createElement("link");return void 0===n.attrs.type&&(n.attrs.type="text/css"),n.attrs.rel="stylesheet",v(t,n.attrs),m(n,t),t}(t),r=function(n,t,e){var r=e.css,o=e.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(r=f(r));o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([r],{type:"text/css"}),s=n.href;n.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,e,t),o=function(){_(e),e.href&&URL.revokeObjectURL(e.href)}):(e=b(t),r=function(n,t){var e=t.css,r=t.media;r&&n.setAttribute("media",r);if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}.bind(null,e),o=function(){_(e)});return r(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap)return;r(n=t)}else o()}}n.exports=function(n,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var e=p(n,t);return d(e,t),function(n){for(var r=[],o=0;o<e.length;o++){var a=e[o];(s=i[a.id]).refs--,r.push(s)}n&&d(p(n,t),t);for(o=0;o<r.length;o++){var s;if(0===(s=r[o]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete i[s.id]}}}};var h,g=(h=[],function(n,t){return h[n]=t,h.filter(Boolean).join("\n")});function x(n,t,e,r){var o=e?"":r.css;if(n.styleSheet)n.styleSheet.cssText=g(t,o);else{var i=document.createTextNode(o),a=n.childNodes;a[t]&&n.removeChild(a[t]),a.length?n.insertBefore(i,a[t]):n.appendChild(i)}}},function(n,t){n.exports=function(n){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!n||"string"!=typeof n)return n;var e=t.protocol+"//"+t.host,r=e+t.pathname.replace(/\/[^\/]*$/,"/");return n.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(n,t){var o,i=t.trim().replace(/^"(.*)"$/,function(n,t){return t}).replace(/^'(.*)'$/,function(n,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?n:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?e+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}}]);
扫一扫
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
