Добавление div внутри другого div без отдельной области
У меня есть проект, где мне нужно добавить всплывающую форму. Вот структура моего проекта.
<body>
<div class = "header">ART Compiler Explorer </div>
<div class = "container">
<div class = "box1">
<div id = "inside" >
<label for = "input-file" class = "custom-file-upload">Select Java File</label>
<select class = "tab" name = "android" id = "android"> </select>
</div>
<textarea id = "editor" name = "field1"><?php if (isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class = "box1 box2">
<div id = "second" >
<select class = "tabb" name = "launguage" id = "launguage" onchange='this.form.submit()' > </select>
<button type = "button" class = "btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
Я хочу добавить всплывающую форму под div id = "inside"
которые имеют структуру кода, например:
<button class = "add" onclick = "document.getElementById('id01').style.display='block'" style = "width:auto;">Add ToolChain</button>
<div id = "id01" class = "modal">
<div class = "imgcontainer">
</div>
<div class = "container_form">
</div>
</div>
Проблема, с которой я столкнулся, заключается в том, что всплывающее окно не появляется полностью, как в приведенной выше ссылке, вместо этого оно скрывается текстовым редактором первой половины (см. Синюю цветовую линию, которая смещается влево).
Кажется, что всплывающее окно div id "id01" создает отдельное пространство внутри div id = "inside", поэтому оно не работает должным образом. Пожалуйста, предложите мне, как решить эту проблему, так как мне нужно добавить всплывающую форму под div id = "inside", но эта всплывающая форма содержит другую div, которая образует отдельное пространство.
Пожалуйста, помогите мне решить эту проблему.
Какая из ваших скрипок должна воспроизводить то, что показывает ваш последний скриншот? Я не вижу этого ни в одном из них.
@Hammadtariq, я включил CSS в ссылку, см. ссылку jsfiddle, которая показывает каждый шаг кода CSS. Спасибо!
@ 04FS, скрипки не отображаются, возможно, это текстовая область, которую нам нужно растянуть вручную. И это всего лишь пример кода, который я создал, чтобы получить общий поток. Также в рабочий примерх я дал .add плавать вправо, но не показывает правильно
Может быть специфичным для браузера - как утверждает @04FS, последняя рабочий пример с диалоговым окном не создает предоставленный вами снимок экрана - он помещает модальное диалоговое окно в середину страницы, как и ожидалось.
@ 04FS, в моем проекте я создал редактор текстового поля в левом поле с помощью зеркала кода, который в скриптах я не могу показать
ваш последний снимок экрана не может быть представлен ни в одной скрипте JS
@Hammadtariq, да, возможно, php-код, который я не включил, чтобы получить тот же результат, что и в моем реальном проекте
можешь объяснить простыми словами что собственно чего ты хочешь
@Hammadtariq, я хочу добавить всплывающее окно под div «внутри» (т.е. там, где размещены все кнопки и меню выбора), чтобы, когда пользователь нажимал кнопку (здесь «Добавить инструментальную цепочку»), появлялась всплывающая форма для ввода пользователя.
@Hammadtariq, код детали всплывающей формы, который я создал по ссылке jsfiddle.net/zu289hxL
@Hammadtariq, который я хочу добавить в существующий проект под div id = "inside", код детали, найденный для выхода из примера проекта по этой ссылке: jsfiddle.net/v3udmb51
Вы хотите, чтобы ваше всплывающее окно было открыто только в текстовом разделе, верно?
@Hammadtariq, в любом месте экрана, но при открытии всплывающего окна фон становится тусклым. Я предпочитаю открывать всплывающее окно в центре
@Hammadtariq, я все еще сталкиваюсь с той же проблемой
@Hammadtariq, текстовая область скрывает всплывающую форму
но у меня это работает, хорошо, вы можете использовать z-index:4; во всплывающем окне, а также увеличить значение z-index
могу ли я опубликовать это как ответ
@Hammadtariq, да, конечно. Спасибо еще раз!!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Всплывающее окно не появляется над текстовой областью из-за z-index, добавьте z-index:4 в модальное всплывающее окно, чтобы оно могло появиться поверх текстовой области.
.modal {
z-index:4
}
включите свой css также