堆栈内存溢出
  繁体   English   中英

如何调整模态大小？

[英]How can I resize modals?

 原文  2018-11-27 11:38:50  4   1    javascript/ css/ html5/ modal-dialog

问题描述

我正在构建一个带有日历的圣诞节日历，该日历在特定日期后打开，并带有一些文本和图像。它们的大小均相同。 经过数周的反复试验，我终于设法将弹出窗口更改为网站上的模式框。 我正在使用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>

1 个解决方案

解决方案1
 0  2018-11-27 19:12:30

我设法尝试并尝试解决该问题的方法。 因此，对于任何有相同问题的人，最终起作用的CSS组合是... 

.tingle_modal-box * {
    width: 500px;
    height: 100%;
}

iframe {
    width: 100%;
    height: 450px;
}

.tingle-modal-box__content {
    padding: 0!important;
}

我不知道为什么这种特定的组合有效，而其他许多组合却无效，但是我不会质疑计算机之神！ 有空的时候，我会回来并尝试找出解决此问题的确切原因。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在引导模式中动态调整字体大小？ 我如何获得多个模态？ 如何创建一组模态？ 如何连续使用两个Twitter Bootstrap模式？ 我如何在Twitter Bootstrap中拥有两个不同的模式 如何将 document.referrer 与两种不同的模式一起使用？ 如何在我的网站上使用多个模态？ 如何通过模态传递变量？ 如何使引导程序模态从屏幕上滑出？ 如何在 Bootstrap 5.1.0 模式之间切换？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM