Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2015, 10:35
Новичок на форуме
Отправить личное сообщение для casper_serg Посмотреть профиль Найти все сообщения от casper_serg
 
Регистрация: 26.03.2015
Сообщений: 7

Проблема с закрытие всплывающего окна в движке Joomla
Добрый день!
Имеется код.
Прошу тапками не кидать код писал не я и в программировани не силен.
Код подключен через плагин в материал joomla, проблема следующая. Через 5 сек открывается всплывающее окно, но закрывается только при нажатии на крестик. Необходимо сделать таким образом чтобы окно закрывалось при нажатии на оверлей.

Код:
 <div id="parent_popup">
  <div id="popup">
   <h1>ТЕКСТ</h1>
   <p><span style="font-size: 14pt;">текст<br>
   Звонок бесплатный!</span></p><br>
    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
        <input   id="input" border="2" type="text" value="8" size="30" maxlength="11" name="txtphonenumber">
        <button style="width:70x;height:30px" title="Жду звонка" class="btn" >Жду звонка</button>
        <!--<input type="radio" id="phone_mask" checked> -->
        <label id="descr" for="phone_mask"></label>
        <br>
                
    </form>
                  <img src="/images/close.png" class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
    </div>

     </div>
<script>
$(".close").on("click","#parent_popup",function() {
      $("#popup").dialog("close")
      })

</script>
<script type="text/javascript">
            var delay_popup = 5000;
            setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
 </script>
          <style>
                #input {
                        border: 1px solid #cccccc; //цвет рамки
                        border-radius: 3px; //закругление углов (общее)
                        -webkit-border-radius: 3px; //закругление углов (Google Chrome)
                        -moz-border-radius: 3px; //закругление углов (FireFox)
                        -khtml-border-radius: 3px; //закругление углов (Safari)
                        background: #ffffff !important; // желательно прописывать, так как в Chrome при сохранных данных оно может быть желтым
                        outline: none; // удаляет обводку в браузерах хром(желтая) и сафари(синяя)
                        height: 24px; // высота на свое усмотрение
                        width: 120px; // ширина на свое усмотрение
                        color: #cccccc; //цвет шрифта в обычном состоянии
                        font-size: 14px; // Размер шрифта
                        font-family: Tahoma; // Стиль шрифта
                        }
                #parent_popup {
                           background-color: rgba(0, 0, 0, 0.8);
                           display: none;
                           position: fixed;
                           z-index: 99999;
                           top: 0;
                           right: 0;
                           bottom: 0;
                           left: 0;
          }
          #popup {
                                background: #fff;
                                width: 750px;
                                margin: 10% auto;
                                padding: 5px 20px 13px 20px;
                                border: 4px solid #ddd;
                                border-color: rgb(225, 179, 52);
                                position: relative;
                           /*--CSS3 фЕОЙ ДМС вМПЛБ--*/
                                -webkit-box-shadow: 0px 0px 20px #000;
                                moz-box-shadow: 0px 0px 20px #000;
                                box-shadow: 0px 0px 20px #000;
                                /*--CSS3 уЛТХЗМЕООЩЕ ХЗМЩ--*/
                                -webkit-border-radius: 15px;
                                -moz-border-radius: 15px;
                                 border-radius: 15px;
             }
            #parent_popup .close {
                                 background-color: rgba(0, 0, 0, 0.8);
                                        border: 2px solid #ccc;
                                        height: 24px;
                                        line-height: 24px;
                                        position: absolute;
                                        right: -15px;
                                        cursor: pointer;
                                        font-weight: bold;
                                        text-align: center;
                                        text-decoration: none;
                                        color: rgba(255, 255, 255, 0.9);
                                        font-size: 14px;
                                        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
                                        top: -24px;
                                        width: 24px;
                                        -webkit-border-radius: 15px;
                                        -moz-border-radius: 15px;
                                        -ms-border-radius: 15px;
                                        -o-border-radius: 15px;
                                        border-radius: 15px;
                                        -moz-box-shadow: 1px 1px 3px #000;
                                        -webkit-box-shadow: 1px 1px 3px #000;
                                         box-shadow: 1px 1px 3px #000;
            }
            .close:hover {
                 background-color: rgba(0, 122, 200, 0.8);
            }
          </style>
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2015, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

casper_serg,
может jquery-ui dialog использовать полностью?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css">
 <style type="text/css">
 #input{border:1px solid #cccccc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;background: #ffffff !important;outline:none;height:24px;width:120px;color:#ccc;font:14px Tahoma}
 .popup{background:#fff;width:750px;padding:5px 20px 13px 20px;border:4px solid #ddd;border:#e1b334;-webkit-box-shadow:0px 0px 20px #000;moz-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px}
 form{padding:0}
 .ui-widget-header{background:#E1B334 none}
 </style>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  ($(function() {

    $("#popup").dialog({
        modal: true,
        dialogClass: "popup",
        minWidth: 700,
        title: 'ТЕКСТ',
        autoOpen: false,
        open: function(event, ui) {
            $(".ui-widget-overlay").on("click", function() {
                $("#popup").dialog('close')
            })
        }
    })

    var delay_popup = 5000;
    setTimeout(function() {
        $("#popup").dialog('open')
    }, delay_popup);
}))(jQuery);


  </script>
</head>

<body>
  <div id="popup">
  <p><span style="font-size: 14pt;">текст<br>
   Звонок бесплатный!</span></p><br>
    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
        <input   id="input" border="2" type="text" value="8" size="30" maxlength="11" name="txtphonenumber">
        <button style="width:70x;height:30px" title="Жду звонка" class="btn" >Жду звонка</button>
        <!--<input type="radio" id="phone_mask" checked> -->
        <label id="descr" for="phone_mask"></label>
        <br>

    </form>
    </div>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2015, 12:29
Новичок на форуме
Отправить личное сообщение для casper_serg Посмотреть профиль Найти все сообщения от casper_serg
 
Регистрация: 26.03.2015
Сообщений: 7

Спасибо за комментарии!
Подставил Ваш код на страницу, но почему то форма отображается на самой странице сразу же. Может проблема с самим движком?
Ответить с цитированием
  #4 (permalink)  
Старый 26.03.2015, 13:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

casper_serg,
скрыть изначально блок если он вам ненужен

#popup{
      display: none;

    }
Ответить с цитированием
  #5 (permalink)  
Старый 26.03.2015, 13:37
Новичок на форуме
Отправить личное сообщение для casper_serg Посмотреть профиль Найти все сообщения от casper_serg
 
Регистрация: 26.03.2015
Сообщений: 7

Форма вообще не открывается по истечению времени
Ответить с цитированием
  #6 (permalink)  
Старый 26.03.2015, 14:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

casper_serg,
значит joomla убила jquery => консоль гляньте
Ответить с цитированием
  #7 (permalink)  
Старый 26.03.2015, 14:55
Новичок на форуме
Отправить личное сообщение для casper_serg Посмотреть профиль Найти все сообщения от casper_serg
 
Регистрация: 26.03.2015
Сообщений: 7

Только где это копать, я даже не знаю.
Спасибо за помощь.
Ответить с цитированием
  #8 (permalink)  
Старый 26.03.2015, 15:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

casper_serg,
ищите по форуму joomla этот конфликт описан много раз
главное правильно применить jQuery.noConflict() и соблюдать последовательность загрузки всех скриптов
Ответить с цитированием
  #9 (permalink)  
Старый 26.03.2015, 15:20
Новичок на форуме
Отправить личное сообщение для casper_serg Посмотреть профиль Найти все сообщения от casper_serg
 
Регистрация: 26.03.2015
Сообщений: 7

Спасибо большое за помощь, разобрался, РАБОТАЕТ!
Несколько недель ничего не мог найти.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление позицией всплывающего окна с разным объемом информации AlinaBeawer Events/DOM/Window 16 20.02.2015 19:09
Управление позицией всплывающего окна с разным объемом информации AlinaBeawer Элементы интерфейса 0 20.02.2015 10:48
Прокрутка всплывающего окна greatilya (X)HTML/CSS 15 18.06.2014 13:45
Выравнивание всплывающего окна по центру экрана. waw555 jQuery 2 07.09.2012 15:43
Позиционирование всплывающего окна debugx jQuery 5 24.05.2011 15:47