Fatal编程技术网
  • javascript/
  • Javascript 是否有一种简单的方法可以将弹出窗口更改为模态（对JS代码的更改最少）

Javascript 是否有一种简单的方法可以将弹出窗口更改为模态（对JS代码的更改最少）

javascript css html

Javascript 是否有一种简单的方法可以将弹出窗口更改为模态（对JS代码的更改最少）,javascript,css,html,Javascript,Css,Html,我已经看到了一些使用modals而不是弹出窗口的例子，我正在尝试更新一些旧的JS代码来做到这一点，而不必重写所有内容（因为我对JS非常陌生，还不了解其中的99%） 下面是我们目前使用的代码。我们基本上是在为当地的慈善机构准备一个圣诞日历，所以我们希望日历的“窗口”只在特定日期之后打开，而不是在特定日期之前打开。每个“窗口”都有自己的html页面，其中包含图像、谜题和线索，然后是慈善机构的链接（我以其中一个为例，因为所有24个都不同）。通过使用弹出窗口，日历目前运行良好。但是我们想更新代码，使用m

我已经看到了一些使用modals而不是弹出窗口的例子，我正在尝试更新一些旧的JS代码来做到这一点，而不必重写所有内容（因为我对JS非常陌生，还不了解其中的99%）

下面是我们目前使用的代码。我们基本上是在为当地的慈善机构准备一个圣诞日历，所以我们希望日历的“窗口”只在特定日期之后打开，而不是在特定日期之前打开。每个“窗口”都有自己的html页面，其中包含图像、谜题和线索，然后是慈善机构的链接（我以其中一个为例，因为所有24个都不同）。通过使用弹出窗口，日历目前运行良好。但是我们想更新代码，使用modals（或者类似的东西），因为窗口头/url栏看起来很笨重

我建议改用情态动词，因为它们看起来比windows更“干净”，但如果有人有更好的选择，我很乐意听到

压延机主要部件的代码：

<body>
<script>

    function dooropen(door)
    {
    today=new Date();
    daynow=today.getDate();
    monthnow=today.getMonth();

if (monthnow!=11 && monthnow!=0) {alert("This calender unlocks in December. Please come back then."); return false;}
if (daynow==door-1) {alert("Come back tomorrow to see what's behind the door!");return false;}
if (door>daynow) {alert("You\'ll have to wait "+(door-daynow)+" days before this door will unlock!"); return false;}

oNewWindow=window.open(urlsarray[door], '_blank','directories=no,height='+heightarray[door]+',width='+widtharray[door]+',location=0,menubar=0,resizable=yes,scrollbars='+scrollbarsarray[door]+',status=no,titlebar=0,toolbar=0');
    }

    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>


功能门打开（门）
{
今天=新日期（）；
daynow=today.getDate（）；
monthnow=today.getMonth（）；
如果（monthnow！=11&&monthnow！=0）{alert（“此日历在12月解锁。请稍后返回”）；返回false；}
如果（daynow==door-1）{alert（“明天再来看看门后面有什么！”）；返回false；}
如果（door>daynow）{alert（“您必须等待”+（door daynow）+“此门将解锁几天！”），则返回false；}
oNewWindow=window.open（urlsarray[door]，“_blank”，“directories=no，height='+heightarray[door]+'，width='+widtharray[door]+'，location=0，menubar=0，resizeable=yes，scrollbars='+Scrollbarray[door]+'，status=no，titlebar=0，toolbar=0'）；
}
urlsarray=新数组（）；
宽度数组=新数组（）；
heightarray=新数组（）；
scrollbarsarray=新数组（）；
var x=285；
变量y=50；
var行=6；
var-cols=4；
var spacinghoriz=120；
var spacingvert=100；
urlsarray[1]=“1.html”；宽度数组[1]=“420”；高度数组[1]=“550”；
urlsarray[2]=“2.html”；宽度数组[2]=“420”；高度数组[2]=“550”；
urlsarray[3]=“3.html”；宽度数组[3]=“420”；高度数组[3]=“550”；
urlsarray[4]=“4.html”；宽度数组[4]=“420”；高度数组[4]=“550”；
urlsarray[5]=“5.html”；宽度数组[5]=“420”；高度数组[5]=“550”；
urlsarray[6]=“6.html”；宽度数组[6]=“420”；高度数组[6]=“550”；
urlsarray[7]=“7.html”；宽度数组[7]=“420”；高度数组[7]=“550”；
urlsarray[8]=“8.html”；宽度数组[8]=“420”；高度数组[8]=“550”；
urlsarray[9]=“9.html”；宽度数组[9]=“420”；高度数组[9]=“550”；
urlsarray[10]=“10.html”；宽度数组[10]=“420”；高度数组[10]=“550”；
urlsarray[11]=“11.html”；宽度数组[11]=“420”；高度数组[11]=“550”；
urlsarray[12]=“12.html”；宽度数组[12]=“420”；高度数组[12]=“550”；
urlsarray[13]=“13.html”；宽度数组[13]=“420”；高度数组[13]=“550”；
urlsarray[14]=“14.html”；宽度数组[14]=“420”；高度数组[14]=“550”；
urlsarray[15]=“15.html”；宽度数组[15]=“420”；高度数组[15]=“550”；
urlsarray[16]=“16.html”；宽度数组[16]=“420”；高度数组[16]=“550”；
urlsarray[17]=“17.html”；宽度数组[17]=“420”；高度数组[17]=“550”；
urlsarray[18]=“18.html”；宽度数组[18]=“420”；高度数组[18]=“550”；
urlsarray[19]=“19.html”；宽度数组[19]=“420”；高度数组[19]=“550”；
urlsarray[20]=“20.html”；宽度数组[20]=“420”；高度数组[20]=“550”；
urlsarray[21]=“21.html”；宽度数组[21]=“420”；高度数组[21]=“550”；
urlsarray[22]=“22.html”；宽度数组[22]=“420”；高度数组[22]=“550”；
urlsarray[23]=“23.html”；宽度数组[23]=“420”；高度数组[23]=“550”；
urlsarray[24]=“24.html”；宽度数组[24]=“420”；高度数组[24]=“550”；
var-doorno=1；
对于（h=0；h
弹出窗口示例代码：

<html>
<head>
    <title>Puzzle 1</title>
</head>

<body background-color="#000000">

<center>
<img src="images/puzzle1.gif" alt="Puzzle1" width=155 height=189 border=0>

<p>Clue text...</p>

<p>_ _ _ _ _</p>

<p><a href=""><img src="logo.png" alt="Logo" width=33 height=33 border=0></a></p>

</center>
</body>
</html>


难题1
线索文本

__uuuuu_
如果您不想过多地编辑代码，我建议您在这里使用一个库。我不能说这是一个特别好的代码，但我已尝试尽可能少地编辑它

这里调用了一个新函数，
openModal
，而不是alert。您可以替换默认的
窗口。alert
函数，但我认为这会使问题进一步复杂化

这将使用库在javascript中创建模态

函数createModal（）{
返回新的叮当声({
页脚：false，
stickyFooter:false，
closeMethods:[“覆盖”、“按钮”、“转义”]，
关闭标签：“关闭”，
cssClass:['custom-class-1'、'custom-class-2']，
});
}
函数createUrlModal（url）{
var newModal=createModal（）；
newModal.setContent（“”）；
返回newModal；
}
函数createTextModal（文本）{
var newModal=createModal（）；
newModal.setContent（“”+text+“”）；
返回newModal；
}
函数openModal（textOrUrl）{
var modalToOpen=textOrUrl.indexOf（'html'）>-1 | | textOrUrl.indexOf（'.com'）>-1？
createUrlModal（文本或URL）：
createTextModal（textOrUrl）；
modalToOpen.open（）；
}
功能门打开（门）{
今天=新日期（）；
daynow=today.getDate（）；
monthnow=today.getMonth（）；
如果（monthnow！=11&&monthnow！=0）{
OpenModel（“此日历在12月解锁。请稍后再来。”）；
返回false；
}
如果（daynow==门-1）{
OpenModel（“明天再来看看门后面有什么！”）；
返回false；
}
如果（门>现在一天）{
OpenModel（“您必须等待”+（door-daynow）+“几天才能打开此门！”）；
返回false；
}
oNewWindow=openModal（urlsarray[door]）；
}
urlsarray=新数组（）；
宽度数组=新数组（）；
heightarray=新数组（）；
scrollbarsarray=新数组（）；
var x=285；
变量y=50；
var行=6；
var-cols=4；
var spacinghoriz=120；
var spacingvert=100；
urlsarray[1]=”https://fr.wikipedia.org/wiki/Main_Page";
宽度数组[1]=“420”；
高度数组[1]=“550”；
urlsarray[2]=“2.html”；
宽度数组[2]

<html>
<head>
    <title>Puzzle 1</title>
</head>

<body background-color="#000000">

<center>
<img src="images/puzzle1.gif" alt="Puzzle1" width=155 height=189 border=0>

<p>Clue text...</p>

<p>_ _ _ _ _</p>

<p><a href=""><img src="logo.png" alt="Logo" width=33 height=33 border=0></a></p>

</center>
</body>
</html>