Модальное содержимое должно быть скрыто с помощью Javascript до тех пор, пока не будет нажата кнопка «Onclick» / После нажатия кнопки «Onclick» будет отображаться значение «Modal».

Question

Я попытался поискать в Google некоторые из javascript, которые будут работать, но в первый раз, когда я отправил это задание, я в итоге испортил код bootstrap. Профессора хотят, чтобы мы получили код Jascript без изменения какого-либо кода bootstrap, который они нам предоставили.

Я внес много изменений и следовал отзывам моих одноклассников. В первый раз, когда я отправил задание, я изменил большую часть кода, чтобы модал работал и кнопка «Резервная таблица», которая активировала модал. Сделав эту ошибку, я не смог выполнить все требования для прохождения задания и, к сожалению, также изменил большую часть кода, который мне предоставили профессора.

Теперь я убедился, что я следовал инструкциям и требованиям для назначение и я использую код, который хотят профессора, но мне нужны некоторые предложения.

Вот мой кодовый блок

https://codepen.io/mfaison/pen/wvazGNe

Я просмотрел код после обратной связи. Модальный код в точности соответствует профессорам. Модальное тело и код кнопки Резервная таблица являются частью кода, который я добавил. Моя проблема в том, что для назначения требуется, чтобы кнопка «Резервная таблица» открывала и закрывала модальное окно, а этого не происходит. Другая часть назначения состоит в том, что модальное тело должно быть внутри модального, и что оно отображает модальное только при нажатии кнопки Резервная таблица, которая не работает.

Answer 1

Как прокомментировано, вам нужно придумать правильный воспроизводимый код, тем не менее, вот некоторый рабочий html / JS, чтобы переключить что-то скрытое / видимое ...

function toggleModal(id) {
  var elem = document.getElementById(id); /* get reference to html element */
  
  if (id) { /* if the element with #id is found, otherwise do zilch */
      var showing = (elem.style.display == 'none') ? false : true; // if () ? then : else

      if (showing) { elem.style.display = 'none';  }  // if the modal is already on screen then hide
      else         { elem.style.display = 'block'; }; // otherwise show the modal
  };
}

<button onclick="toggleModal('myModal')">toggle Modal</button>
<div id="myModal" style="display: none">bla bla and some yada yada</div>

Не говорите своим профессорам ...

(... вам лучше убедиться, что вы понимаете, что делает код, иначе вы все равно наберет F , просто сказав ...)