Предположим у нас имеется задача создать выпадающее меню и для этого мы испульзуем javascript функцию createPopup. Далее, мы хотели бы построить меню наподобии MS Excel 2007, где у нас имеется возможность выбрать несколько (!) вариантов прежде чем применить данный выбор - как правило это означает, что имеется кнопка внутри меню, при нажатии на которую выбор (например фильтрация по выбранным элементам) запускается.Традиционный метод скрыть под-окно соданное createPopup это кликнуть на пространство основного документа в любом месте вне под-окна. Примерно тоже самое получится если из под-окна вы запустите переход на новый документ (адрес) в основном окне. К сожалению ни один из перечисленных вариантов, не соответствует поставленной в начале задаче. Другой вариант - close() метод вызванный из под-окна, но он сгенерирует диалог с вопросом "Действительно ли вы хотите закрыть данный документ". Тоже не совсем подходющий метод для закрытия меню.
Комментарий: тривиальный поиск через поисковые машины к сожалению не даёт ответа на поставленный вопрос - 95% сайтов выданных как результат поиска описывают методы работы с под окнами открытыми используя window.open
В принципе, ниже приведённый код должен позволить выполнить поставленную задачу.
В данном примере меню появляется при нажатии мышкой (клик) на ячейку таблицы в первом ряды/первый столбец (адресс 0 / 0 ). Меню содержит список и кнопку. Меню создаётся вызовом функции test: которая вызывается в следующем коде: onclick="test(closeAction)". При вызове в функцию передаётся параметром имя функции которая будет закрывать под-окно.
Функция test делает следующее:
1. Генерирует под-окно используя createPopup
2. Устанавливает функцию закрытия под-окна как метод вызываемый при нажатии кнопки в под-окне.
3. Сохраняет ссылку на под-окно в глобальной переменной.
Функция закрытия под-окна использует данную глобальную переменную и вызывает hide().
<html>
<script language="javascript">
var mpopup
function test(clickEv)
{
var wnd= window.createPopup();
wnd.document.body.style.border="solid black 1px";
wnd.document.body.innerHTML="<select><option>a<option>b</select>
<br/><input id="'a1'" type="\">";
wnd.document.getElementById("a1").attachEvent("onclick",clickEv);
wnd.show(150,150,200,50,document.body);
mpopup=wnd;
}
function closeAction()
{
mpopup.hide()
}
</script>
<body>
<table>
<tr><th onclick="test(closeAction)">1kasdkjshd</th>
<th>1kasdkjshd</th><th>1kasdkjshd</th><th>1kasdkjshd</th>
<th>1kasdkjshd</th><th>1kasdkjshd</th><th>1kasdkjshd</th>
</tr><tr>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
</tr><tr>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
</tr></table>
</body> </html>
wnd.document.getElementById("a1").attachEvent("onclick",clickEv);
wnd.show(150,150,200,50,document.body);
mpopup=wnd;
}
function closeAction()
{
mpopup.hide()
}
</script>
<body>
<table>
<tr><th onclick="test(closeAction)">1kasdkjshd</th>
<th>1kasdkjshd</th><th>1kasdkjshd</th><th>1kasdkjshd</th>
<th>1kasdkjshd</th><th>1kasdkjshd</th><th>1kasdkjshd</th>
</tr><tr>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
</tr><tr>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
<td>1kasdkjshd</td><td>1kasdkjshd</td><td>1kasdkjshd</td>
</tr></table>
</body> </html>
PS: Следующая конструкция позволит вам получить доступ к объектам внутри основного документа (окна) из под-окна: parent.document.
getElementById('xxx'), где xxx - id объекта к которому вы хотите получить доступ.
Комментариев нет:
Отправить комментарий