Есть ли простой способ изменить всплывающие окна на модальные (с минимальными изменениями в коде JS) - PullRequest
Новая
       0

Есть ли простой способ изменить всплывающие окна на модальные (с минимальными изменениями в коде JS)

0 голосов
/ 23 ноября 2018

Я видел несколько примеров использования SO модалов вместо всплывающих окон, и я пытаюсь обновить старый код JS, чтобы сделать это без необходимости переписывать все (так как я очень плохо знаком с JS и непока не понимаю 99%).

Код, который мы используем в данный момент, приведен ниже.По сути, мы пытаемся запустить рождественский календарь для местной благотворительности, поэтому хотим, чтобы «окна» календаря открывались только после определенных дат, а не раньше.Каждое «окно» имеет свою собственную html-страницу с изображением, загадкой и подсказкой, а затем ссылку на благотворительность (я включил одну в качестве примера, так как все 24 разные).В данный момент календарь отлично работает, используя всплывающие окна.Но мы хотим обновить код, чтобы вместо этого использовать модалы (или что-то в этом роде), поскольку заголовок окна / строка URL-адреса выглядит неуклюже.

Я предложил перейти на модальные модели, так как они выглядят намного «чище», чем окна, но если у кого-то есть альтернативы получше, я был бы рад их услышать.

Код для основной части календаря: 

<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>

Код для главной страницы, где будет отображаться iframe: 

<html>
<head>
    <title>Christmas Calender</title>
    <link rel="shorcut icon" href="favicon.jpg" type="image/jpg">
    <link rel="icon" href="favicon.jpg" type="image/x-icon">
</head>

<body style="background-color:#000000">

<center>
<iframe src="calendarcode.html" title="Christmas Calendar 2018" width=980 height=650 frameborder=0>
</iframe>
</center>

<!-- Button to return to previous room -->
<center>
    <p><a href="room1.html"><img src="arrowleft.png" alt="Room1" width=97 height=97 border=0></a>
</center>

<!-- Logo -->
<center>
    <a href=""><img src="logo.png" alt="charity name" width=40 height=40 border=0></a>
</center>

</body>
</html>

Например, всплывающий кодокно: 

<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 Ответ

0 голосов
/ 23 ноября 2018

Я бы порекомендовал вам использовать здесь библиотеку, если вы не хотите слишком сильно редактировать код.Я не могу сказать, что это особенно хороший код, но я попытался отредактировать его как можно меньше.

Здесь вместо функции alert вызывается openModal.Вы можете заменить функцию window.alert по умолчанию, но я думаю, что это еще более усложнит ситуацию.

Для создания модальных форм в javascript используется библиотека tingle . 

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();

  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] = "https://fr.wikipedia.org/wiki/Main_Page";
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>');
  }
}
.tingle-modal-box__content {
  padding: 0!important;
}

iframe {
  width: 100%;
}

/* You can use the styles of the modal to adjust its size: */
.tingle-modal-box {
  height: 500px;
  width: 90%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.13.2/tingle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.13.2/tingle.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...