我创建了一个模型弹出窗口。我遇到的问题是，我想在php echo中添加此模型流行音乐，例如警报。
但是当我在php echo或$msg=""中添加此html时，它无法正常工作，并且不会像弹出窗口或警报一样显示。
我在同一页面上添加的所有CSS或js文件。
是否可以在php echo中添加自定义模型pop？
请帮助
我是怎么做到的..
如果我的代码有误，请提出要求。解决这个问题。
我正在使用的代码在下面提及。
$(function() {
var appendthis = ("<div class='modal-overlay js-modal-close'></div>");
function open(e) {
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
$("#popup1").fadeIn();
}
function close() {
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
}
$("header .js-modal-close, .modal-overlay").click(function() {
close();
});
$("footer .js-modal-close").click(function() {
if ($(this).text() === "Done") {
close();
} else {
var $modalBody = $(".modal-body");
$modalBody.scrollTop($modalBody.scrollTop() + $modalBody.height());
}
});
$(".modal-body").scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
$("footer .js-modal-close").text("Done");
} else {
$("footer .js-modal-close").text("Next >");
}
});
$(window).resize(function() {
// Get maximum height of modal body. Minimum 100.
var maxHeight = Math.max($(window).height() - 220, 100);
$(".modal-body").css("max-height", maxHeight);
$(".modal-box").css({
left: ($(window).width() - $(".modal-box").outerWidth()) / 2,
top: ($(window).height() - $(".modal-box").outerHeight()) / 2
});
$(".modal-body").scroll();
})
// show modal
open();
// adjust size
$(window).resize();
});html {
font-family: "roboto", helvetica;
position: relative;
height: 100%;
font-size: 100%;
line-height: 1.5;
color: #444;
}
h2 {
margin: 1.75em 0 0;
font-size: 5vw;
}
h3 {
font-size: 1.1em;
}
.v-center {
height: 100vh;
width: 100%;
display: table;
position: relative;
text-align: center;
}
.v-center>div {
display: table-cell;
vertical-align: middle;
position: relative;
top: -10%;
}
.btn {
font-size: 3vmin;
padding: 0.75em 1.5em;
background-color: #fff;
border: 1px solid #bbb;
color: #333;
text-decoration: none;
display: inline;
border-radius: 4px;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.btn:hover {
background-color: #ddd;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;
}
.btn-small {
padding: .75em 1em;
font-size: 0.8em;
}
.modal-box {
display: none;
top: 50%;
left: 50%;
position: fixed;
z-index: 1000;
width: 100%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 2px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
max-width: 90%;
}
@media screen and (min-width: 32em) {
.modal-box {
width: 70%;
overflow: auto;
}
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 {
margin: 0;
}
.modal-box .modal-body {
padding: 0em 1.5em;
overflow: auto;
}
.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}
.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) !important;
}
a.close {
line-height: 1;
font-size: 1.5em;
position: absolute;
top: 5%;
right: 2%;
text-decoration: none;
color: #bbb;
}
a.close:hover {
color: #222;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}<body>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="popup1" class="modal-box">
<header> <a href="#" class="js-modal-close close">×</a>
<h3>Pop Up One</h3>
</header>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare
mollis. Ut tempor augue mi, sed luctus neque luctus non. Vestibulum mollis tristique blandit. Aenean condimentum in leo ac feugiat. Sed posuere, est at eleifend suscipit, erat ante pretium turpis, eget semper ex risus nec dolor. Etiam pellentesque
nulla neque, ut ullamcorper purus facilisis at. Nam imperdiet arcu felis, eu placerat risus dapibus sit amet. Praesent at justo at lectus scelerisque mollis. Mauris molestie mattis tellus ut facilisis. Sed vel ligula ornare, posuere velit ornare,
consectetur erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo at felis vitae facilisis. Cras volutpat fringilla nunc vitae hendrerit. Donec porta id augue quis sodales. Sed sit amet metus ornare, mattis sem at, dignissim arcu. Cras rhoncus ornare
mollis. Ut tempor augue mi, sed luctus neque luctus non. Vestibulum mollis tristique blandit. Aenean condimentum in leo ac feugiat. Sed posuere, est at eleifend suscipit, erat ante pretium turpis, eget semper ex risus nec dolor. Etiam pellentesque
nulla neque, ut ullamcorper purus facilisis at. Nam imperdiet arcu felis, eu placerat risus dapibus sit amet. Praesent at justo at lectus scelerisque mollis. Mauris molestie mattis tellus ut facilisis. Sed vel ligula ornare, posuere velit ornare,
consectetur erat.</p>
</div>
<footer> <a href="#" class="btn btn-small js-modal-close">Next</a> </footer>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>