Всплывающее окно

val06 · 9 Мар 2016

Добрый день. Подскажите скрипт что бы было такое окно. Для открытия долна передаваться переменная. Все что нашел в сети по окнам, все не то (

Q_BASIC · 9 Мар 2016

Любое модальное окно из бутстрапа + заполнение полей перед открытием

И всё вынести в отдельную функцию

ykpon · 9 Мар 2016

Я делал у себя на сайте через jquery (удивительно, правда?). Просто при нажатии на кнопку вставляешь нужные данные в поля и показываешь окно.

Код:

<div id="modal">
<input type="text" id="name">
<input type="text" id="phone">
<input type="text" id="comment">
</div>

Код:

<script>
$('zakaz').on('click', function() {
$('#modal #name').val('имя'); // какое нибудь $_SESSION['name'], например, можно вставить
$('#modal #phone').val('телефон');
$('#modal').modal('show');
});
</script>

Black#FFFFFF · 10 Мар 2016

bootstrap modal, если не хотите подключать целую библиотеку, то fancybox, если не хотите использовать jquery, то есть такая замечательная штука, как highslide js, или lightbox-) Далее - функции взаимодействия. Например: если на странице есть определенное поле

HTML:

<input type="hidden" id="show_modal" />

то показывать окно, если этого поля нет, то не показывать. Дальше смотрите апи понравившегося окошка, и вызываете его.

Скрытое содержимое доступно для зарегистрированных пользователей!

val06 · 10 Мар 2016

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

вот код JS

HTML:

<script type="text/javascript">
$(window).ready(function(){
p = $('.popup__overlay')
$('#popup__toggle').click(function() {
    p.css('display', 'block')
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})
});
</script>

код кнопки

HTML:

<p><input type="button" value="Материал" id="popup__toggle" /></p>

код окна куда инклудю свой файл

HTML:

<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <div class="popup__close">X</div>

       <? include "test.php"; ?>
   
</div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>

у меня 2 кнопки, при нажатие скрипту должна передаться переменная, как мне передать эту переменную прописав в кнопку ?

Zege368 · 10 Мар 2016

Скрытое содержимое доступно для зарегистрированных пользователей!

Ну вариантов очень много, можно AJAX-ом POST передать JSON данные, ниже пример.

HTML:

/* Пример калькулятор суммы */

<html>
    <head>
          <title>JQuery AJAX</title>
          <meta charset="utf-8">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- библиатека что бы работал AJAX -->
            <script type="text/javascript">
            // Перехватываем нажатие на кнопку отправить
              $("#submit").click(function(){
               var fnumb = $("#a").val(); // забераем что внтури текствого поля
               var snumb = $("#b").val(); // забераем что внтури текствого поля
               $.post('server.php', {a:fnumb,b:snumb}, function(data){
                $("#block").text(data); // получив результат от php выведем его в теге <div id="block"></div>
                });
               });

            });
            </script>
    </head>
    <body>
          <input type="text" id="a">
          <input type="text" id="b">
          <button id="submit">Отправить!</button>
          <div id="block"></div>
    </body>
</html>



<?
//тут отдельный файл server.php который будет обрабатывать запрос и отправлять рузультат суммы двух файлов
$a = $_POST['a']; // проверяем что переменная "а" пришла
$b = $_POST['b']; // и так же пришла переменная "b"
echo $a+$b; // возвращаем ответ
?>

val06 · 10 Мар 2016

честно говоря не особо понял
у меня есть две кнопки

HTML:

<input type="button" value="Материал" id="popup__toggle" />     <input type="button" value="Допматериал" id="popup__toggle" />

есть две переменные - $material и $dopmaterial

$material должна передаваться скрипту test.php в окне при нажатие первой кнопки, $dopmaterial должна передаваться скрипту test.php в окне при нажатие второй кнопки
куда прописать эти переменный в вашем примере ?

Zege368 · 10 Мар 2016

Честно говоря не до конца понимаю вашу задачу, но попробовал, что-то придумать из её объяснений, может пример ниже сможет вам помочь... если нет, то опишите, что конкретно в нём не ясно, попробую объяснить.

HTML:

<html>
  <head>
  <title>JQuery AJAX</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- библиатека что бы работал AJAX -->
  <script type="text/javascript">
         $( document ).ready(function() {
               // Перехватываем нажатие на кнопку отправить
                $(".btn1").click(function(){ // кликаем на кнопку "Материал" и отправляем POST в test.php из  <input type="text" value='$material ' id="a">
                var fnumb = $("#a").val(); // забераем что внтури текствого поля а
                $.post('test.php', {a:fnumb}, function(data){
                 $("#block").text(data); // получив результат от php выведем его в теге <div id="block"></div>
                 });
                });
                $(".btn2").click(function(){// кликаем на кнопку "Допматериал" и отправляем POST в test.php из  <input type="text" value='$dopmaterial' id="b">
                var snumb = $("#b").val(); // забераем что внтури текствого поля b
                $.post('test.php', {b:snumb}, function(data){
                 $("#block").text(data); // получив результат от php выведем его в теге <div id="block"></div>
                 });
                });
         });
  </script>
  </head>
  <body>
       <?
         $material = 'test1';
         $dopmaterial = 'test2';
       ?>
  <input type="text" value='<?=$material; ?>' id="a">
  <input type="text" value='<?=$dopmaterial; ?>' id="b">
  <input type="button" class='btn1' value="Материал" id="popup__toggle" />  <input type="button" class='btn2' value="Допматериал" id="popup__toggle" />
  <div id="block"></div>
  </body>
</html>

и отдельный файл test.php

PHP:

<?
//тут отдельный файл test.php который будет обрабатывать запрос и отправлять рузультат
if(!empty($_POST['a']) || !empty($_POST['b']))
{
  echo 'Результат: '.$_POST['a'].$_POST['b']; // возвращаем ответ
}
?>

вот рабочий вариант

Для просмотра ссылки Войди или Зарегистрируйся

val06 · 12 Мар 2016

переменную передает, но только в окне получается черте что а не то что надо, прикладываю скрины как должно быть и как есть. надеюсь на решение проблемы )

chirs · 12 Мар 2016

val06 написал(а):
честно говоря не особо понял
у меня есть две кнопки

HTML:

<input type="button" value="Материал" id="popup__toggle" /> <input type="button" value="Допматериал" id="popup__toggle" />

есть две переменные - $material и $dopmaterial

$material должна передаваться скрипту test.php в окне при нажатие первой кнопки, $dopmaterial должна передаваться скрипту test.php в окне при нажатие второй кнопки
куда прописать эти переменный в вашем примере ?

В вашем варианте скрипта есть сразу несколько недочетов:
1. Кнопки у вас имеют одинаковый id, поэтому событие "клик" по кнопке будет только у первой кнопки.
2. <? include "test.php"; ?> в html-коде приведет сразу к выполнению test.php уже при загрузке страницы, а вам надо, чтобы он выполнялся при нажатии кнопок.
Поэтому я предложил бы исправить ваш код таким:

Код:

<script type="text/javascript">
$(window).ready(function(){
  p = $('.popup__overlay');
  $('.popup__toggle').click(function() {
    id = $(this).attr('id');
    $.ajax({
      url: "test.php?var="+id,
      success: function(data) { $('.popup__html').html(data); }
    });
    p.css('display', 'block');
  });
  p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $(p).css('display', 'none')
    }
  });
  $('.popup__close').click(function() {
    p.css('display', 'none')
  });
});
</script>

<div class="popup__overlay">
  <div class="popup">
    <div class="popup__close">X</div>
    <div class="popup__html"></div>
  </div>
</div>

<input type="button" value="Материал" class="popup__toggle" id="var_1" />
<input type="button" value="Допматериал" class="popup__toggle" id="var_2" />

Принцип действия:
1. <div class="popup__html"></div> будет изначально пустым,
2. событие нажатия кнопки привязываем так: $('.popup__toggle')
3. при нажатии на кнопку класса popup__toggle мы получаем атрибут id
4. ajax-ом мы делаем запрос к скрипту test.php и передаем ему этот параметр id
5. test.php может получить переданный параметр так $_GET['var'] и в зависимости от его значения вернет какой-то результат
6. результат, который вернет test.php (html-код) вставляем в <div class="popup__html"> командой $('.popup__html').html(data);
7. даже если кнопок popup__toggle будет много и у них будут совпадать id - код все равно будет работать
Вместо id у кнопок можно еще использовать data-* атрибуты, т.е. задать кнопкам атрибут, скажем, data-material-type="1" или data-material-type="2" тогда его значение можно получить так: var = p.data("data-material-type")
Однако, для IE 10-го и ниже нужно поддержку HTML5 добавлять...

Всплывающее окно

val06

Гуру форума

Вложения

Q_BASIC

Хранитель порядка

ykpon

Постоялец

Black#FFFFFF

Постоялец

val06

Гуру форума

Zege368

Создатель

val06

Гуру форума

Zege368

Создатель

val06

Гуру форума

Вложения

chirs

Создатель