renat2985
commented
5 years ago Привет. У нас есть класс hidden "class":"hidden" который скрывает блок.
И есть js функция toggle(' ') которой можно задать имя блока и она будет добавлять/удалять с блока класс hidden. Тем самым будет скрывать и показывать ваш блок.
js функции выполнять можно только в линках "type":"link". Все это выглядит примерно таким образом:
{
"type":"text",
"name":"my-block",
"title":"TEXT TEXT TEXT TEXT",
"class":"hidden"
},
{
"type":"link",
"title":"test link",
"action":"javascript:toggle('my-block');",
},"type":"text" - можно заменять на любой другой тип.
Если хочется что бы текс был как бы в всплывающем поле необходимо добавить класс pop-up и стили с нужными вам размерами и позицией, ну и кнопку сделаем немного красивее, получится так:
{
"type":"text",
"name":"my-block",
"title":"TEXT TEXT TEXT TEXT",
"style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;",
"class":"pop-up hidden"
},
{
"type":"link",
"title":"test link",
"action":"javascript:toggle('my-block');",
"class":"btn btn-block btn-warning"
},Если хочется добавить крестик в этот выпадающий блок, код будет таким:
{
"type":"text",
"name":"my-block",
"title":"<button class=\"close\" onclick=\"toggle('my-block')\">×</button>TEXT TEXT TEXT TEXT",
"style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;",
"class":"pop-up hidden"
},Если нажимая на кнопку хотим отправить GET и показать наш блок, кнопка должна выглядеть так:
{
"type":"link",
"title":"test link",
"action":"javascript:toggle('my-block');send_request(this,'tut_get_url_Suda_mozno_dobavitj_peremennie')",
"class":"btn btn-block btn-warning"
},Ну а более правильный способ наверное будет таким. Как только мы нажмем на кнопку, у нас появится скрытое поле с картинкой и надписью Загрузка. Страничка к которой мы делаем GET должна вернуть ответ в json формате:
{"title":"Загрузка завершена, все делали."}
И когда она его вернет этот текст заменит старый в вашем всплывающем окне.
{
"type":"text",
"name":"my-block",
"title":"<div class=\"loader\"></div><h3>{{LangLoading}}</h3>",
"style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;",
"class":"pop-up hidden"
},
{
"type":"link",
"title":"test link",
"action":"javascript:toggle('my-block');send_request(this,'tut_get_url_Suda_mozno_dobavitj_peremennie','[[my-block]]')",
"class":"btn btn-block btn-warning"
},В дополнение, пришла еще идея, не проверял но должно работать: У нас есть еще response, в котором мы можем указать имя блока в который вставить изменения которые пришли отправив GET.
{
"type":"text",
"name":"my-block",
"title":" "
},
{
"type":"button",
"title":"test link",
"action":"get=[[peremennaja]]&test=2",
"response":"[[my-block]]",
"class":"btn btn-block btn-warning"
},И страничка к которой мы делаем GET должна вернуть примерно такой json:
{"title":"Тут какой-то ваш текст","style":"position:fixed;top:30%;left:50%;width:400px;margin-left:-200px;text-align:center;","class":"pop-up"}
Если есть идеи как это все сделать более изящно, предлагайте.
DmitryBorisenko33
Здравствуйте. Хочу попросить Вас добавить новый вид кнопки, при нажатии на которую происходил бы get запрос, как и обычно. Но ответ на этот запрос что бы появлялся во всплывающем окне, которое потом можно было, после просмотра, закрыть. Так было бы можно очень быстро выводить информацию из esp на экран. Спасибо.