65 lines
4.1 KiB
JavaScript
65 lines
4.1 KiB
JavaScript
import { AMSPOPUP_PREFIX, ANIMATION_TIME } from "../../constant";
|
|
|
|
// CSS样式字符串
|
|
var modalStyles = "\n .".concat(AMSPOPUP_PREFIX, "modal {\n /* \u6DFB\u52A0\u5F39\u7A97\u6837\u5F0F */\n background-color: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n overflow: hidden;\n }\n\n .").concat(AMSPOPUP_PREFIX, "overlay {\n /* \u6DFB\u52A0\u8499\u5C42\u6837\u5F0F */\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.4);\n z-index: 999;\n }\n\n .").concat(AMSPOPUP_PREFIX, "fadeIn {\n /* \u6DFB\u52A0\u6DE1\u5165\u52A8\u753B */\n animation: fadeIn ").concat(ANIMATION_TIME, "ms;\n animation-fill-mode: forwards;\n }\n\n .").concat(AMSPOPUP_PREFIX, "fadeOut {\n /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n animation-fill-mode: forwards;\n }\n\n /* \u5B9A\u4E49\u6DE1\u5165\u52A8\u753B */\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @-moz-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n /* \u5B9A\u4E49\u6DE1\u51FA\u52A8\u753B */\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n @-webkit-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n @-moz-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n");
|
|
|
|
// 创建和插入样式表
|
|
export var insertStyleSheet = function insertStyleSheet() {
|
|
var style = document.createElement('style');
|
|
style.innerHTML = modalStyles;
|
|
document.head.appendChild(style);
|
|
};
|
|
|
|
// 插入弹窗
|
|
export var createModal = function createModal(_ref) {
|
|
var device = _ref.device,
|
|
url = _ref.url,
|
|
widthPadding = _ref.widthPadding,
|
|
heightPadding = _ref.heightPadding;
|
|
return new Promise(function (resolve, reject) {
|
|
try {
|
|
var overlay = document.createElement('div');
|
|
overlay.classList.add("".concat(AMSPOPUP_PREFIX, "overlay"), "".concat(AMSPOPUP_PREFIX, "fadeIn"));
|
|
var modal = document.createElement('div');
|
|
modal.classList.add("".concat(AMSPOPUP_PREFIX, "modal"), "".concat(AMSPOPUP_PREFIX, "fadeIn"));
|
|
if (device === 'desktop') {
|
|
modal.style.width = '600px';
|
|
modal.style.height = '464px';
|
|
modal.style.borderRadius = '12px';
|
|
} else {
|
|
modal.style.width = "calc(100% - ".concat(2 * widthPadding, "px)");
|
|
modal.style.height = "calc(100% - ".concat(2 * heightPadding, "px)");
|
|
modal.style.borderRadius = '8px';
|
|
}
|
|
var iframe = document.createElement('iframe');
|
|
iframe.src = url; // 替换为实际的 URL 地址
|
|
iframe.style.border = 'none';
|
|
iframe.style.width = '100%';
|
|
iframe.style.height = '100%';
|
|
modal.appendChild(iframe);
|
|
var body = document.getElementsByTagName('body')[0];
|
|
body.appendChild(overlay);
|
|
body.appendChild(modal);
|
|
resolve(iframe);
|
|
} catch (error) {
|
|
reject({
|
|
title: 'sdk_error_create_pop_up',
|
|
message: error === null || error === void 0 ? void 0 : error.toString()
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 销毁弹窗
|
|
export var destroyModal = function destroyModal() {
|
|
var overlay = document.querySelector(".".concat(AMSPOPUP_PREFIX, "overlay"));
|
|
var modal = document.querySelector(".".concat(AMSPOPUP_PREFIX, "modal"));
|
|
overlay.classList.remove("".concat(AMSPOPUP_PREFIX, "fadeIn"));
|
|
overlay.classList.add("".concat(AMSPOPUP_PREFIX, "fadeOut"));
|
|
modal.classList.remove("".concat(AMSPOPUP_PREFIX, "fadeIn"));
|
|
modal.classList.add("".concat(AMSPOPUP_PREFIX, "fadeOut"));
|
|
setTimeout(function () {
|
|
overlay.parentNode.removeChild(overlay);
|
|
modal.parentNode.removeChild(modal);
|
|
}, ANIMATION_TIME);
|
|
}; |