我已经获得了一个基本的模态示例，onclick在模态窗口中打开了一个特定的html文件：
Reference Database: postgres @ jdbc:postgresql://localhost:5432/MY_DATABASE (Default Schema: public)
Comparison Database: postgres @ jdbc:postgresql://localhost:5432/MY_DATABASE (Default Schema: public)
[...]
Missing Unique Constraint(s):
email_type_lang_mandant_unique on emailentity(belongsto_userid, emailtype, language)
filecard_delivery_source_unique on filecardentity(assignmentdelivery_id, original_cardid)
lesson_delivery_source_unique on lessonentity(assignmentdelivery_id, sourcelesson_lessonid)
link_type_lang_mandant_unique on linkentity(belongsto_userid, linktype, language)
[...]
Liquibase 'diff' Successful
我想调整它以使用javascript变量对象来填充模态窗口 - 例如示例中为<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.hasModal,
.inner {
overflow: hidden;
}
.modal,
.inner {
position: absolute;
}
.modal {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: -1;
transition: opacity .3s;
background: rgba(0, 0, 0, 0.8);
}
.inner {
top: 10vh;
bottom: 10vh;
left: 50%;
width: 80%;
max-width: 960px;
background: #fff;
border-radius: 1em;
transform: translate(-50%, 100%);
transition: transform .3s;
}
.modal-content {
overflow-y: scroll;
height: 100%;
padding: 1em;
}
.close {
position: absolute;
top: 1em;
right: 1em;
cursor: pointer;
}
.show {
opacity: 1;
z-index: 1;
}
.show .inner {
transform: translate(-50%, 0);
}
</style>
</head>
<body>
<a href="test.html" class="modalLink">click</a>
<div class="modal">
<div class="inner">
<div class="modal-content"></div>
<div class="close" id="close">✕</div>
</div>
</div>
<script>
var modal_html = '<h1>modal title</h1><p>modal content</p>';
$(function() {
var $body = $('body');
$('.modalLink').on('click', function(e) {
e.preventDefault();
$('.modal-content').load(this.href, function() {
$body.addClass('hasModal');
$('.modal').addClass('show').on('click', function(e) {
if (e.target == this || e.target.id == 'close') {
$(this).removeClass('show');
$body.removeClass('hasModal');
}
});
});
})
})
</script>
</body>
</html>
。非常感谢任何指针。这是一个working jsfiddle。
答案 0 :(得分：1)
怎么样：
$(function() {
var $body = $('body');
$('.modalLink').on('click', function(e) {
e.preventDefault();
$('.modal-content').html(modal_html);
$body.addClass('hasModal');
$('.modal').addClass('show').on('click', function(e) {
if (e.target == this || e.target.id == 'close') {
$(this).removeClass('show');
$body.removeClass('hasModal');
}
});
});
})