JARVIS (From Iron Man) Ответов: 2

Исправьте этот проект кода javascript

Я пытаюсь создать модальное всплывающее окно с помощью CSS и javascript, но кнопка для отображения модального окна, похоже, не запускает javascript для отображения окна modsl (div), и я не уверен, почему. Хорошо, я внес некоторые изменения и получил модальное всплывающее окно для отображения, но теперь оно отображается сразу и не ждет нажатия кнопки. И теперь я, кажется,не могу сделать заголовок модальной части короче.
http://jsfiddle.net/zipster1967/uxLojjps
Я получил структуру для этого из примера в w3schools.com и после внесения некоторых изменений в CSS и добавления довольно большой структуры в HTML-файл модальный не делает того, что он делает в Примере. Пожалуйста, может ли кто-нибудь сказать мне, где я допустил свою ошибку или если их несколько, то где они находятся?

Что я уже пробовал:

Я начал с примера из w3schools.com который заключается в следующем:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

Karthik_Mahalingam

разместите его в jsfiddle и поделитесь ссылкой

JARVIS (From Iron Man)

Хорошо, я создал файлы в jsfiddle, но я не вижу, как отредактировать мой первоначальный вопрос или как создать ссылку на мои файлы jsfiddle.
Я получил это от jsfiddle:

OriginalGriff

Редактировать вопрос очень просто: просто используйте виджет "улучшить вопрос": наведите курсор мыши на вопрос, и он появится внизу.

2 Ответов

Рейтинг:
19

F-ES Sitecore

В вашем css

t
.modal {
    display: none; /* Hidden by default */

это применяется ко всему, что имеет класс "modal" внутри элемента "t", и это не соответствует вашему модальному окну, поскольку оно не находится внутри элемента"t". Так что измените его на этот

.modal {
    display: none; /* Hidden by default */


т. е. избавиться от линии "Т"

JARVIS (From Iron Man)

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

JARVIS (From Iron Man)

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

F-ES Sitecore

Боюсь, что на самом деле я мало что знаю о css, поэтому оставляю все мелочи дизайнерам.

Рейтинг:
1

JARVIS (From Iron Man)

Немного поиграв с CSS, я обнаружил правильные настройки полей, отступов и границ, чтобы получить нужный размер. Кроме того, я понял, что у меня есть близкий пролет и заголовок, занимающие разные Вертикальные позиции в div. Как только я объединил их, плавая в заголовке div, они могли существовать в одном и том же вертикальном пространстве.