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

@TRITAKSISTA · Регистрация: 25.01.2016

Студворк — интернет-сервис помощи студентам

Есть сайт http://xn--80aawbj7akbccf.xn--p1ai/
Есть кнопка
echo '<a href="http://59.mine.nu:8088/3taxi/" class="btn btn-primary custom-button green-btn">ЗАКАЗАТЬ</a>
подскажите неучу как сделать эту ссылку во всплывающем окне? Понимаю , что где то на грани элементарного....но я учусь только. сайт на вордпресс, поэтому советы с учетом пожалуйста.

@Андрюшатина · 26.01.2016, 06:43

Я тебе предложу сделать это просто и плагинами.
Можно тяжело и на чистом PHP, но не будем.
Все на самом деле примитивно, тут нужно два плагина установить:
1. Easy FancyBox
2. Contact Form 7
Я не заставляю именно их, просто я делал с этими плагинами, тут главное правильно вытягивать классы форм этих плагинов. Плюс есть возможность открывать в popup изображения.
Так что выбирай из тьмы плагинов WordPress с каким тебе удобней работать.

Просто ставишь два плагина: Contact Form 7 и Easy FancyBox.
Но перед этим делаешь контактную форму под себя.
После того как форма сделана, ты копируешь её код: к примеру [contact-form-7 id="5" title="Контактная форма 1"] и всего лишь остается добавить код в шаблон:

HTML5
1
2
3
4
5
6
<a href="#contact_form_pop" class="btn btn-primary custom-button green-btn fancybox">ЗАКАЗАТЬ</a>
<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
        <?php echo do_shortcode('[contact-form-7 id="5" title="Контактная форма 1"]'); ?>
    </div>
</div>

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

@TRITAKSISTA · 26.01.2016, 11:36 **[ТС]**

спасибо, но боюсь немного не то. Мне надо именно ссылку
http://59.mine.nu:8088/3taxi/
в окне вывести. Создавать новую форму не надо. Есть в ссылке готовая форма . Оба плагина у меня стоят.

Сообщение от Андрюшатина

Но перед этим делаешь контактную форму под себя.

Или ты имеешь ввиду в контактформ7 прописать эту ссылку, и уже контактформу с помощью фэнсибокса выводить в модальное окно? уже сложнее чем я думал)) щасс попробую

@AmateR62 · 26.01.2016, 12:07

Попробуйте открыть iframe с формой в модальном окне. Например вот так:

HTML5
1
2
3
4
5
6
7
8
<a id="formLink" href="javascript:void(0)">Заказать такси</a>
<div id="box">
    <div id="box-inner">
    </div>
    <div id="container">
        <iframe src="http://59.mine.nu:8088/3taxi/"></iframe>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
    font-family: Arial;
}
#box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}
#box-inner {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: blue;
    opacity: 0.3;
    display: none;
}
#box #container {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
    margin: auto;  /* центрирование */
    height: 15em;
    width: 25em;
    border: 1px solid black;
    background: white;
    padding: 1%;
}
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById("formLink").onclick = function()
{
    document.getElementById("box").style.display = "block";
    document.getElementById("box-inner").style.display = "block";
}
document.getElementById("box").onclick = function(e)
{
    if(e.toElement == document.getElementById("box-inner"))
    {
        document.getElementById("box").style.display = "none";
        document.getElementById("box-inner").style.display = "none";
    }
}

http://jsfiddle.net/x8R2U/53/

@Андрюшатина · 26.01.2016, 14:43

Сообщение от TRITAKSISTA

в контактформ7 прописать эту ссылку, и уже контактформу с помощью фэнсибокса выводить в модальное окно?

Именно

@TRITAKSISTA · 26.01.2016, 18:48 **[ТС]**

че то не работает сайт....крутится прелоад и не грузится с этим кодом. Я вставлял
echo '
<a href="#contact_form_pop" class="btn btn-primary custom-button green-btn fancybox">ЗАКАЗАТЬ</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[contact-form-7 id="966" title="Без названия"]'); ?>

</div>';

endif;
в файл Zerif Lite: big_title.php (sections/big_title.php)
и не работает. В контактформ7 я не стал вставлять теги а просто вставил ссылку
http://59.mine.nu:8088/3taxi/
в форму. Хотя с тегами тоже пробовал. но там напонятно куда ее эту ссылку. Поэтому без всяких тегов. И не работает.
Хотя в виде без окна, с простой ссылкой
echo '<a href="http://59.mine.nu:8088/3taxi/" class="btn btn-primary custom-button green-btn">ЗАКАЗАТЬ</a>';
все норм грузится. Что то где то напутал...сам биг-титл-пхп вот

Кликните здесь для просмотра всего текста

<div class="home-header-wrap">

<?php

global $wp_customize;

$zerif_parallax_img1 = get_theme_mod('zerif_parallax_img1',get_ template_directory_uri() . '/images/background1.jpg');
$zerif_parallax_img2 = get_theme_mod('zerif_parallax_img2',get_ template_directory_uri() . '/images/background2.png');
$zerif_parallax_use = get_theme_mod('zerif_parallax_show');

if ( $zerif_parallax_use == 1 && (!empty($zerif_parallax_img1) || !empty($zerif_parallax_img2)) ) {
echo '<ul id="parallax_move">';
if( !empty($zerif_parallax_img1) ) {
echo '<li class="layer layer1" data-depth="0.10" style="background-image: url(' . esc_url( $zerif_parallax_img1 ) . ');"></li>';
}
if( !empty($zerif_parallax_img2) ) {
echo '<li class="layer layer2" data-depth="0.20" style="background-image: url(' . esc_url( $zerif_parallax_img2 ) . ');"></li>';
}

echo '</ul>';
}

echo '<div class="header-content-wrap">';

echo '<div class="container">';

$zerif_bigtitle_title = get_theme_mod('zerif_bigtitle_title',__( 'ONE OF THE TOP 10 MOST POPULAR THEMES ON WORDPRESS.ORG','zerif-lite'));

if( !empty($zerif_bigtitle_title) ):

echo '<h1 class="intro-text">'.wp_kses_post( $zerif_bigtitle_title ).'</h1>';

elseif ( isset( $wp_customize ) ):

echo '<h1 class="intro-text zerif_hidden_if_not_customizer"></h1>';

endif;

$zerif_bigtitle_redbutton_label = get_theme_mod('zerif_bigtitle_redbutton_ label',__('Features','zerif-lite'));

$zerif_bigtitle_redbutton_url = get_theme_mod('zerif_bigtitle_redbutton_ url', esc_url( home_url( '/' ) ).'#focus');

$zerif_bigtitle_greenbutton_label = get_theme_mod('zerif_bigtitle_greenbutto n_label',__("What's inside",'zerif-lite'));

$zerif_bigtitle_greenbutton_url = get_theme_mod('zerif_bigtitle_greenbutto n_url',esc_url( home_url( '/' ) ).'#focus');

if( (!empty($zerif_bigtitle_redbutton_label) && !empty($zerif_bigtitle_redbutton_url)) || (!empty($zerif_bigtitle_greenbutton_labe l) && !empty($zerif_bigtitle_greenbutton_url)) ):

echo '<div class="buttons">';

if ( !empty($zerif_bigtitle_redbutton_label) && !empty($zerif_bigtitle_redbutton_url) ):

echo '<a href="'.esc_url( $zerif_bigtitle_redbutton_url ).'" class="btn btn-primary custom-button red-btn">'.wp_kses_post( $zerif_bigtitle_redbutton_label ).'</a>';

elseif ( isset( $wp_customize ) ):

echo '<a href="" class="btn btn-primary custom-button red-btn zerif_hidden_if_not_customizer"></a>';

endif;

if ( !empty($zerif_bigtitle_greenbutton_label ) && !empty($zerif_bigtitle_greenbutton_url) ):

echo '<a href="'.esc_url( $zerif_bigtitle_greenbutton_url ).'" class="btn btn-primary custom-button green-btn">'.wp_kses_post( $zerif_bigtitle_greenbutton_label ).'</a>';

elseif ( isset( $wp_customize ) ):

echo '<a href="" class="btn btn-primary custom-button green-btn zerif_hidden_if_not_customizer"></a>';

endif;

echo '</div>';

endif;

echo '</div>';

echo '</div>';
echo '<div class="clear"></div>';

?>

</div>

@Андрюшатина · 26.01.2016, 23:05

Сообщение от TRITAKSISTA

В контактформ7 я не стал вставлять теги а просто вставил ссылку

Ну если не хочешь с контакт форм 7 морочаться, а хочешь что бы он вставил в модальное окно именну твою форму, которая работает по ссылке - воспользуйся предложением AmateR62

Сообщение от AmateR62

Попробуйте открыть iframe с формой в модальном окне. Например вот так:

Так даже легче получается. Даже никаких плагинов дополнительных ставить не надо.

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@TRITAKSISTA 0 / 0 / 0 Регистрация: 25.01.2016 Сообщений: 4

	Всплывающее окно еще раз 25.01.2016, 23:11. Показов 1202. Ответов 6 Метки нет (Все метки) Есть сайт http://xn--80aawbj7akbccf.xn--p1ai/ Есть кнопка echo '<a href="http://59.mine.nu:8088/3taxi/" class="btn btn-primary custom-button green-btn">ЗАКАЗАТЬ</a> подскажите неучу как сделать эту ссылку во всплывающем окне? Понимаю , что где то на грани элементарного....но я учусь только. сайт на вордпресс, поэтому советы с учетом пожалуйста. 0

@TRITAKSISTA 0 / 0 / 0 Регистрация: 25.01.2016 Сообщений: 4
	26.01.2016, 18:48 [ТС]
	че то не работает сайт....крутится прелоад и не грузится с этим кодом. Я вставлял echo ' <a href="#contact_form_pop" class="btn btn-primary custom-button green-btn fancybox">ЗАКАЗАТЬ</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> <?php echo do_shortcode('[contact-form-7 id="966" title="Без названия"]'); ?> </div>'; endif; в файл Zerif Lite: big_title.php (sections/big_title.php) и не работает. В контактформ7 я не стал вставлять теги а просто вставил ссылку http://59.mine.nu:8088/3taxi/ в форму. Хотя с тегами тоже пробовал. но там напонятно куда ее эту ссылку. Поэтому без всяких тегов. И не работает. Хотя в виде без окна, с простой ссылкой echo '<a href="http://59.mine.nu:8088/3taxi/" class="btn btn-primary custom-button green-btn">ЗАКАЗАТЬ</a>'; все норм грузится. Что то где то напутал...сам биг-титл-пхп вот Кликните здесь для просмотра всего текста <div class="home-header-wrap"> <?php global $wp_customize; $zerif_parallax_img1 = get_theme_mod('zerif_parallax_img1',get_ template_directory_uri() . '/images/background1.jpg'); $zerif_parallax_img2 = get_theme_mod('zerif_parallax_img2',get_ template_directory_uri() . '/images/background2.png'); $zerif_parallax_use = get_theme_mod('zerif_parallax_show'); if ( $zerif_parallax_use == 1 && (!empty($zerif_parallax_img1) \|\| !empty($zerif_parallax_img2)) ) { echo '<ul id="parallax_move">'; if( !empty($zerif_parallax_img1) ) { echo '<li class="layer layer1" data-depth="0.10" style="background-image: url(' . esc_url( $zerif_parallax_img1 ) . ');"></li>'; } if( !empty($zerif_parallax_img2) ) { echo '<li class="layer layer2" data-depth="0.20" style="background-image: url(' . esc_url( $zerif_parallax_img2 ) . ');"></li>'; } echo '</ul>'; } echo '<div class="header-content-wrap">'; echo '<div class="container">'; $zerif_bigtitle_title = get_theme_mod('zerif_bigtitle_title',__( 'ONE OF THE TOP 10 MOST POPULAR THEMES ON WORDPRESS.ORG','zerif-lite')); if( !empty($zerif_bigtitle_title) ): echo '<h1 class="intro-text">'.wp_kses_post( $zerif_bigtitle_title ).'</h1>'; elseif ( isset( $wp_customize ) ): echo '<h1 class="intro-text zerif_hidden_if_not_customizer"></h1>'; endif; $zerif_bigtitle_redbutton_label = get_theme_mod('zerif_bigtitle_redbutton_ label',__('Features','zerif-lite')); $zerif_bigtitle_redbutton_url = get_theme_mod('zerif_bigtitle_redbutton_ url', esc_url( home_url( '/' ) ).'#focus'); $zerif_bigtitle_greenbutton_label = get_theme_mod('zerif_bigtitle_greenbutto n_label',__("What's inside",'zerif-lite')); $zerif_bigtitle_greenbutton_url = get_theme_mod('zerif_bigtitle_greenbutto n_url',esc_url( home_url( '/' ) ).'#focus'); if( (!empty($zerif_bigtitle_redbutton_label) && !empty($zerif_bigtitle_redbutton_url)) \|\| (!empty($zerif_bigtitle_greenbutton_labe l) && !empty($zerif_bigtitle_greenbutton_url)) ): echo '<div class="buttons">'; if ( !empty($zerif_bigtitle_redbutton_label) && !empty($zerif_bigtitle_redbutton_url) ): echo '<a href="'.esc_url( $zerif_bigtitle_redbutton_url ).'" class="btn btn-primary custom-button red-btn">'.wp_kses_post( $zerif_bigtitle_redbutton_label ).'</a>'; elseif ( isset( $wp_customize ) ): echo '<a href="" class="btn btn-primary custom-button red-btn zerif_hidden_if_not_customizer"></a>'; endif; if ( !empty($zerif_bigtitle_greenbutton_label ) && !empty($zerif_bigtitle_greenbutton_url) ): echo '<a href="'.esc_url( $zerif_bigtitle_greenbutton_url ).'" class="btn btn-primary custom-button green-btn">'.wp_kses_post( $zerif_bigtitle_greenbutton_label ).'</a>'; elseif ( isset( $wp_customize ) ): echo '<a href="" class="btn btn-primary custom-button green-btn zerif_hidden_if_not_customizer"></a>'; endif; echo '</div>'; endif; echo '</div>'; echo '</div><!-- .header-content-wrap -->'; echo '<div class="clear"></div>'; ?> </div> Миниатюры 0