Модальное окно с использованием php
 

Сколько не ищу не могу найти модальное окно которые обращается к php для получения текста... нахожу только скрипты которые показывают и скрывают модальное окно которое уже есть в html...

Может кто подскажет как реализовать получение и вывод или саму ссылку на скрипт и/или статью описывающий данный процесс...

Хочу использовать для вывода записей т.е. надо ссылку типа:

<a href ="/page.php?id=ID" onclick="show_modal('ID');">Показать модальное окно</a>

т.е. нажал на ссылку вылезло окно, нажал "Окрыть в новой вкладке" перешел на страницу "/page.php?id=ID"... Опыт в PHP у меня есть, так что если не сложно мне бы JQ реализацию т.к. в нем опыта меньше... у меня только опыт с ним для работы с CSS и HTML

Заранее спасибо!

создаёшь фунцию show_modal, пихаешь в неё $.post, и ответ уже формируешь на php

как я уже сказал у меня нет опыта работы с файлами...
Спасибо...

function show_modal(id_data){
    $.ajax({
        url: '/post.php',
        type: 'GET',
        data: 'id='+id_data,
        dataType: 'HTML',
        cache: false,
        success: function(){
        $('#myModal').show();
        }
    });
};

Типа такого? Если да, то как её дописать? т.к. данный вариант только вроде как "получает" данные... но опять же опыта нет и что писать не знаю..

dizent,
По первости проще пользовацо методом load();
$('#header').load('Header.html #foo')
Красным селектор куда подгружаем, синим - с какого адреса, зеленым - селектор загружаемого элемента с указанной страницы.

http://jquery-docs.ru/Ajax/load/#urldatacallback

не я не знаю и не умею пользоваться данной конструкцией...
Возвращаясь к теме: Дайте ссылку на статью и/или скрипт, ну или дайте код.
Заранее спасибо...!

В хидере должна быть подключена библиотека jQuery, код для окна ниже

<a href ="/page.php?id=ID" onclick="show_modal('ID');return false;">Показать модальное окно</a>
<div id="Modal"></div>

<script type="text/javascript">
function show_modal(ID) {
 $('#Modal').load("/page.php?id="+ID)
}
</script>

или я чего то не понял или вы не дописали... тут я вижу как он получает ID из ссылки, но не вижу как он будет получать текст для вставки в окно... он зачем то загружает(?) ссылку на страницу...

Вообщем если объяснить то мне надо как в ВК грубо говоря т.е. нажал на ссылку вылетело окно там текст из бд, перешел по ссылке(т.е. в новой вкладке) то появилась страница с текстом которая не связана с JQ

dizent,
:) Воткните код и попробуйте

Я все понимаю, но на угад я позже поиграю и насколько я "изучил" функцию, то она как граббер т.е. не нужная мне задача... вообще спасибо конечно, что цель моя остается найти модальное окно с возможностью чтения БД при помощи ID

Удачных поисков )) У javascript нет доступа к серверной БД, вы будите искать целую вечность то чего небывает.
Deff всё правильно показал.
в этой строчке
$('#Modal').load("/page.php?id="+ID)

1) load вызывает скрипт page.php на сервере,
2)скрипту передаётся параметр id
3) скрипт page на сервере отработает и вернёт результат
4) результат работы серверного скрипта будет помещёт в тег с id=Modal

а как будет серверный скрипт будет формировать результат это уже его проблема, в том числе ему никто немешает работать и с бд

Я прекрасно понял, что да как, но как вызвать вызов функции при клике...?

Вообщем получилось разобраться с получением данных из БД(P.S.: дабы не было выше: посредством PHP файла) и отправлял в JSON и используя jQuery.parseJSON обработал.

Спасибо, можно закрывать...

P.S.: Для интересующихся...

JQ:

function showModal(idData){
  $.ajax({
    url: '/post.php',
    type: 'GET',
    data: 'id='+idData,
    dataType: 'HTML',
    cache: false,
    success: function(msg){
      jsonData = jQuery.parseJSON(msg);
      $("#id").text(jsonData.id);
      $("#name").text(jsonData.name);
      $("#text").text(jsonData.text);
    }
  });
};

PHP:

if($_GET['id'] == 5478) {
  echo '{"id":"5478","name":"gtasdf","text":"fasdf"}';
}
elseif($_GET['id'] == 4198) {
  echo '{"id":"4198","name":"asdasdasdasd","text":"adfa asdfasdf asdfasdf"}';
}
else {
  echo '{"id":"'.($_GET['id']?$_GET['id']:0).'","name":"err name","text":"err text"}';
}

HML:

<a href="#" onclick="showModal('4198');return false;">Показать модальное окно</a>
<br />
<div id="modal">
    <div id="id"></div>
    <div id="name"></div>
    <div id="text"></div>
</div>

модальное окно
 

Скажите ищу модальное окно для вывода данных из базы данных это решение подойдет??