//动态生成bootstrap模态弹框
function ff() {
function commitResult() { // 要出发的函数
alert("提交成功");
this.parentNode.parentNode.parentNode.style.display = "none"; //这里时为了获得 modal_bc;
}
//aa里面就是你的弹框的布局,可以自定义
let aa = '<div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('screenName') +'</span><input type="text" id="imgName" required></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('note') + '</span><input type="text" id="moreMessage" required></div><br/><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('zoom') +'</span><input type="checkbox"></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('popUp') + '</span><input type="checkbox"></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('screenWidth') + '</span><input type="text"></div><div><span style="display: inline-block; width: 60px; margin-right: 20px">' + mxResources.get('screenHeight') + '</span><input type="text"></div>';
create_modal(false, aa, commitResult);
}
/*
* params:
* alert_or_confirm type:true or false
* modal_content type:String
* confirm_trigger_function type:function
* 注意:confirm_tirrger_function 里最后异步:必须关闭模态框
* 因加上这段代码:
* this.parentNode.parentNode.parentNode.style.display = "none"; //这里时为了获得 modal_bc;
*
* */
function create_modal(alert_or_confirm, modal_contents, confirm_trigger_function) {
let modal_bg = document.createElement("div");
let modal_container = document.createElement("div");
let modal_title = document.createElement("div");
let modal_content = document.createElement("div");
let modal_footer = document.createElement("div");
//设置id
modal_bg.setAttribute("id", "modal_bg");
modal_container.setAttribute("id", "modal_container");
modal_title.setAttribute("id", "modal_title");
modal_content.setAttribute("id", "modal_content");
modal_footer.setAttribute("id", "modal_footer");
//设置样式
modal_bg.style.cssText = "display:block;" +
"background-color: rgba(0,0,0,0.4);" +
"position:fixed;" +
"top:0;" +
"bottom:0;" +
"right:0;" +
"left:0;";
modal_container.style.cssText = "background-color:white;" +
"width:300px;" +
"height:300px;" +
"margin:10% auto;";
modal_title.style.cssText = "color:white;" +
"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
"width:100%;" +
"height:50px;" +
"line-height:50px;";
modal_content.style.cssText = "color:black;" +
"margin-top:10px;"+
"padding-left:20px;" +
"vertical-align:middle;" +
"width:100%;" +
"height:190px;" +
"border-bottom:2px solid grey";
modal_footer.style.cssText = "padding:14px 15px 15px;" +
"color:white;" +
"width:100%;" +
"height:60px;";
modal_container.appendChild(modal_title);
modal_container.appendChild(modal_content);
modal_container.appendChild(modal_footer)
modal_bg.appendChild(modal_container);
//将整个模态框添加到body中
document.body.appendChild(modal_bg);
//给模态框添加相应的内容
// modal_title.innerHTML="This is a modal title";
modal_content.innerHTML = modal_contents;
// modal_footer.innerHTML = "This is a modal footer";
// 制作关闭按钮
let close_button = document.createElement("span");
close_button.innerHTML = "×";
close_button.setAttribute("id", "modal_close_button")
close_button.style.cssText = " margin-right:8px;" +
"line-height:50px;" +
"color: #aaa;" +
"float: right;" +
"font-size: 28px;" +
"font-weight: bold;";
close_button.onmouseover = function(event) {
close_button.style.color = "black";
event = event || window.event;
event.stopPropagation();
}
document.onmouseover = function() {
document.getElementById("modal_close_button").style.color = "#aaa";
}
close_button.addEventListener("click", function() {
modal_bg.style.display = "none"
})
modal_title.appendChild(close_button);
//制作确定按钮和取消按钮
let confirm_button = document.createElement("div");
let cancel_button = document.createElement("div");
confirm_button.style.cssText = "border-radius:5px;" +
"color:white;" +
"text-align:center;" +
"line-height:20px;" +
"font-size:17px;" +
"float:right;" +
"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
"padding:5px;" +
"margin-right:30px;";
cancel_button.style.cssText = "border-radius:5px;" +
"color:white;" +
"text-align:center;" +
"line-height:20px;" +
"font-size:17px;" +
"float:right;" +
"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
"padding:5px;" +
"margin-right:30px;";
confirm_button.innerHTML = mxResources.get('apply'); //确认
cancel_button.innerHTML = mxResources.get('cancel') //取消
if (alert_or_confirm) {
modal_footer.appendChild(confirm_button);
} else {
modal_footer.appendChild(confirm_button);
modal_footer.appendChild(cancel_button);
}
//添加相应的事件
cancel_button.addEventListener("click", function() {
modal_bg.style.display = "none"
});
// confirm_button.addEventListener("click", confirm_trigger_function);
confirm_button.addEventListener("click", function(){
modal_bg.style.display = "none"
myAlert(mxResources.get('updateSuccess'), onclick, false);
});
}
点击按钮调用的时候:
//changeImg就是我要获取的按钮
changeImg.each(function() {
$(this).on('click', changeImg, ff);
})