个人中心
gpt4 book ai didi

javascript - 如何调整模态框的大小？

转载 作者：行者123 更新时间：2023-11-28 00:46:36 24 4
gpt4 key购买 nike

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

最佳答案

我设法通过反复试验(某种程度上)解决了这个问题。因此，对于遇到相同问题的任何人，最终起作用的 CSS 组合是......

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

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

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

我不知道为什么这个特定的组合有效而许多其他组合却没有，但我不会质疑计算机之神!当我有空闲时间时，我会回来并尝试找出解决尺寸问题的确切原因。

关于javascript - 如何调整模态框的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53498829/

24 4 0
文章推荐： javascript - Angularjs $http 使用 $q.defer 返回未完成的结果
文章推荐： c++ - Boost C++ UDP 示例无法通过互联网传输
文章推荐： html - Flex 页眉、内容、页脚布局
文章推荐： css - 使用 Transform Scale onClick
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com