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

Тема в разделе "JavaScript", создана пользователем Sarboys, 30 янв 2015.

  1. Sarboys

    Sarboys

    Регистрация:
    30 янв 2015
    Сообщения:
    0
    Симпатии:
    0
    Всем доброго дня,совсем не давно начал заниматься версткой,так что не судить строго
    Не могли бы помочь написать код на Jquery для всплывающего окна :
    HTML :
    HTML:
    <div class="url"><a href="#">Задать вопрос</a></div>
    Вот сама форма :
    HTML:
    <div id="forma">
        <a href="#" class="close"><img src="img/close.png"></a>
        <input type="text" class="input" name="widget_01" value="" required="" placeholder="Имя*"><br>
        <input type="email" class="input" name="widget_02" value="" required="" placeholder="Телефон*"><br>
         <input type="text" class="input" name="widget_03" value="" required="" placeholder="Укажите удобное для Вас время для звонка"><br>
        <input type="submit" class="sumbit-1" value="Перезвоните мне">
        </div>

    CSS :

    HTML:
    #forma {
        display: none;
        position: fixed;
        top:30%;
        left: 40%;
        width: 400px;
        height: 280px;
        padding: 60px 40px;
        text-align: center;
        border: 1px solid #0071BB;
        border-radius: 15px;
        background: url(img/forma1.jpg) center no-repeat;;
    }
    #forma input {
        width: 320px;
        height: 50px;
        margin-top: 20px;
        border-radius: 15px;
        padding: 0px 0px 0px 20px;
     
    }
    #forma .sumbit-1 {
        display: block;
        font-size: 30px;
        text-decoration: none;
        color: black;
        border: 1px solid #0071BB;
        border-radius: 8px;
        background: #0071BB;
        color: white;
        width: 320px;
        margin: 0 auto;
        margin-top: 15px;
        padding: 0px;
    }
    #forma .sumbit-1:hover {
        color:white;
    }
    #forma input:focus {
        outline: none;
    }
    #forma p {
        display: block;
        font-size: 25px;
        color: #053259;
    }
    #forma .close {
        display: block;
        width: 0px;
        background:none;
        float: right;
        margin-top: -50px;
        margin-right: -5px;
        border: none;
    }
     
  2. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    195
    $('.url a').click(function(){
    $('#forma').show();
    return false;
    })
     
    v@dim нравится это.
  3. Gevano

    Gevano

    Регистрация:
    11 янв 2015
    Сообщения:
    34
    Симпатии:
    5
  4. vlavlat

    vlavlat

    Регистрация:
    7 ноя 2012
    Сообщения:
    72
    Симпатии:
    8
    http://getbootstrap.com/javascript/ - modal настоятельно рекомендую если нет желания скачивать весь bootstrap то можно скачать только код модального окна в разделе customaze
     
  5. Avanger321

    Avanger321

    Регистрация:
    12 окт 2014
    Сообщения:
    0
    Симпатии:
    0
    Так есть же <dialog></dialog>
    Для самого элементарного решения вопроса.
     
  6. MyWeb

    MyWeb

    Регистрация:
    27 май 2015
    Сообщения:
    13
    Симпатии:
    1
    Всплывающее окно наверное проще даже через JS... и устанавливать ничего не надо...)