我正在建造一个带有日历的圣诞节压光机，这些窗口在特定日期后打开，并带有一些文本和图像。它们的大小均相同。经过数周的反复试验，我终于设法将弹出窗口更改为网站上的模式框。我正在使用Tingle jquery插件。但是，无论我尝试什么.css，我都无法获得调整宽度/高度大小的模态。
公司主要网站的HTML代码（将日历放置在iframe中）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Christmas Calender</title>
</head>
<body>
<center>
<iframe src="calendercode.html" title="Christmas Calendar 2018" width=980 height=650 frameborder=0>
</iframe>
</center>
<!-- Button to return to Entrance room -->
<center>
<p><a href="entranceroom.html"><img src="cogarrowleft.png" alt="Room1" width=97 height=97 border=0></a>
</center>
<!-- Company Logo -->
<center>
<a href=""><img src="logo.png" alt="Logo" width=40 height=40 border=0></a>
</center>
</body>
</html>
压延机本身的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Christmas Calender</title>
<link rel="stylesheet" href="calendermain.css">
<link rel="stylesheet" href="calenderwindow.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.13.2/tingle.min.css" rel="stylesheet" />
</head>
<body>
<script>
function createModal() {
return new tingle.modal({
footer: false,
stickyFooter: false,
closeMethods: ['overlay', 'button', 'escape'],
closeLabel: "Close",
cssClass: ['custom-class-1', 'custom-class-2'],
});
}
function createUrlModal(url) {
var newModal = createModal();
newModal.setContent('<iframe src="' + url + '"></iframe>');
return newModal;
}
function createTextModal(text) {
var newModal = createModal();
newModal.setContent('<h1>' + text + '</h1>');
return newModal;
}
function openModal(textOrUrl) {
var modalToOpen = textOrUrl.indexOf('html') > -1 || textOrUrl.indexOf('.com') > -1 ?
createUrlModal(textOrUrl) :
createTextModal(textOrUrl);
modalToOpen.open();
}
function dooropen(door) {
today = new Date();
daynow = today.getDate();
monthnow = today.getMonth();
// Date controls de-activated for testing purposes. Before launch, remove /* from the start of the below 'if' statements. This ensures the calendar can't be used pre-Dec/post-Jan and doors cannot be opened early.
/* if (monthnow != 11 && monthnow != 0) {
openModal("This calender unlocks in December. Please come back then.");
return false;
}
if (daynow == door - 1) {
openModal("Come back tomorrow to see what's behind the door!");
return false;
}
if (door > daynow) {
openModal("You\'ll have to wait " + (door - daynow) + " days before this door will unlock!");
return false;
} */
oNewWindow = openModal(urlsarray[door]);
}
urlsarray = new Array();
widtharray = new Array();
heightarray = new Array();
scrollbarsarray = new Array();
var x = 285;
var y = 50;
var rows = 6;
var cols = 4;
var spacinghoriz = 120;
var spacingvert = 100;
urlsarray[1] = "1.html"; widtharray[1] = "420"; heightarray[1] = "550";
urlsarray[2] = "2.html"; widtharray[2] = "420"; heightarray[2] = "550";
urlsarray[3] = "3.html"; widtharray[3] = "420"; heightarray[3] = "550";
urlsarray[4] = "4.html"; widtharray[4] = "420"; heightarray[4] = "550";
urlsarray[5] = "5.html"; widtharray[5] = "420"; heightarray[5] = "550";
urlsarray[6] = "6.html"; widtharray[6] = "420"; heightarray[6] = "550";
urlsarray[7] = "7.html"; widtharray[7] = "420"; heightarray[7] = "550";
urlsarray[8] = "8.html"; widtharray[8] = "420"; heightarray[8] = "550";
urlsarray[9] = "9.html"; widtharray[9] = "420"; heightarray[9] = "550";
urlsarray[10] = "10.html"; widtharray[10] = "420"; heightarray[10] = "550";
urlsarray[11] = "11.html"; widtharray[11] = "420"; heightarray[11] = "550";
urlsarray[12] = "12.html"; widtharray[12] = "420"; heightarray[12] = "550";
urlsarray[13] = "13.html"; widtharray[13] = "420"; heightarray[13] = "550";
urlsarray[14] = "14.html"; widtharray[14] = "420"; heightarray[14] = "550";
urlsarray[15] = "15.html"; widtharray[15] = "420"; heightarray[15] = "550";
urlsarray[16] = "16.html"; widtharray[16] = "420"; heightarray[16] = "550";
urlsarray[17] = "17.html"; widtharray[17] = "420"; heightarray[17] = "550";
urlsarray[18] = "18.html"; widtharray[18] = "420"; heightarray[18] = "550";
urlsarray[19] = "19.html"; widtharray[19] = "420"; heightarray[19] = "550";
urlsarray[20] = "20.html"; widtharray[20] = "420"; heightarray[20] = "550";
urlsarray[21] = "21.html"; widtharray[21] = "420"; heightarray[21] = "550";
urlsarray[22] = "22.html"; widtharray[22] = "420"; heightarray[22] = "550";
urlsarray[23] = "23.html"; widtharray[23] = "420"; heightarray[23] = "550";
urlsarray[24] = "24.html"; widtharray[24] = "420"; heightarray[24] = "550";
var doorno = 1;
for (h = 0; h < rows; ++h) {
for (g = 0; g < cols; ++g, ++doorno) {
document.write('<a class="button" onClick="dooropen('+doorno+');" href="#" style="position: absolute; left:'+(x+(g*spacinghoriz))+'px; top:'+(y+(h*spacingvert))+'px;">'+doorno+'</a>');
}
}
</script>
</body>
</html>
日历窗口/模式框的CSS代码：
/* The modal boxes */
.tingle_modal-box * {
width: 500px;
height: 100%;
}
iframe {
width: 100%;
}
.tingle-modal-box__content {
padding: 0!important;
}
/* Pop up calender windows */
body {
background-color: black;
color: white;
text-align: center;
text-decoration: none;
font-family: sans-serif;
}
.image {
padding-top: 20px;
padding-bottom: 30px;
}
.text {
padding-bottom: 30px;
}
主日历的CSS代码：
body {
background-image:url(calenderback.png);
background-repeat: no-repeat;
background-size: cover;
}
.button {
color:#ffffff; /* text colour on the doors */
width:40px;
text-align:center;
margin:3px;
font-family:sans-serif;
font-size:large;
padding:3pt;
border-width: 0pt;
border-style:outset;
text-decoration:none;
}
.button:hover {
color:#ffffff; /* text colour on the door when moused over */
/* background-color:#000000; > add additional background colour to doors when moused over */
width:40px;
text-align:center;
margin:3px;
font-family:sans-serif;
font-size:x-large;
padding:3pt;
border-width: 0pt;
border-style:outset;
text-decoration:none;
}
单个日历窗口的HTML代码（它们都与此类似，但具有不同的图像/文本：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Christmas Calendar</title>
<link rel="stylesheet" href="calenderwindow.css">
</head>
<body>
<center>
<div class="image">
<img src="exampleimage.gif" alt="Image" width=155 height=189 border=0>
</div>
<div class="text">
<p>Puzzle text...</p>
<p>_ _ _ _ _</p>
</div>
</center>
</body>
</html>
答案 0 :(得分：0)
我设法尝试并尝试解决该问题的方法。因此，对于有相同问题的任何人，最终起作用的CSS组合都是...
.tingle_modal-box * {
width: 500px;
height: 100%;
}
iframe {
width: 100%;
height: 450px;
}
.tingle-modal-box__content {
padding: 0!important;
}
我不知道为什么这种特定的组合有效，而许多其他组合却无效，但是我不会质疑计算机之神！有空的时候，我会回来并尝试找出解决此问题的确切原因。