Как создать простое всплывающее окно с помощью jQuery

Question

Я разрабатываю веб-страницу. Когда мы щелкаем содержимое div с именем mail, как я могу показать всплывающее окно, содержащее метку email и текстовое поле?

Answer 1

Сначала CSS - настройте это так, как вам нравится:

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

И JavaScript:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

И, наконец, HTML:

<div class="messagepop pop">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>

<a href="/contact" id="contact">Contact Us</a>

Вот демонстрация и реализация jsfiddle.

В зависимости от ситуации вы можете загружать всплывающее содержимое с помощью ajax-вызова. Лучше избегать этого, если это возможно, поскольку это может дать пользователю более значительную задержку перед просмотром контента. Здесь пара изменений, которые вы захотите сделать, если вы будете использовать этот подход.

HTML становится:

<div>
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a>
</div>

И общая идея JavaScript становится такой:

$("#contact").on('click', function() {
    if($(this).hasClass("selected")) {
        deselect();               
    } else {
        $(this).addClass("selected");
        $.get(this.href, function(data) {
            $(".pop").html(data).slideFadeToggle(function() { 
                $("input[type=text]:first").focus();
            });
        }
    }
    return false;
});

Answer 2

Проверить jQuery UI Dialog . Вы бы использовали это так:

JQuery:

$(document).ready(function() {
    $("#dialog").dialog();
});

Разметка:

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

Готово!

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

Answer 3

Я использую плагин jQuery под названием ColorBox , это

1. Очень прост в использовании
2. легкий
3. настраиваемый
4. самый красивый всплывающий диалог, который я когда-либо видел для jQuery

Answer 4

Попробуйте Magnific Popup , он отзывчив и весит всего около 3 КБ.

Answer 5

Посетите этот URL

Диалоговые окна JQuery UI

Answer 6

Я думаю, что это отличный учебник по написанию простого всплывающего jquery Плюс выглядит очень красиво

Answer 7

Очень легкий модальный всплывающий плагин. ПОПЕЛЬТ - http://welbour.com/labs/popelt/

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

Не стесняйтесь использовать и отправлять твиты.

Answer 8

Вот хороший, простой пример именно этого, здесь: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Answer 9

Простое всплывающее окно с использованием html5 и javascript.

HTML: -

    <dialog id="window">  
     <h3>Sample Dialog!</h3>  
     <p>Lorem ipsum dolor sit amet</p>  
     <button id="exit">Close Dialog</button>
    </dialog>  

  <button id="show">Show Dialog</button> 

JavaScript: -

   (function() {  

            var dialog = document.getElementById('window');  
            document.getElementById('show').onclick = function() {  
                dialog.show();  
            };  
            document.getElementById('exit').onclick = function() {  
                dialog.close();  
            };
        })();

Answer 10

ТОЛЬКО CSS POPUP LOGIC! ПОПРОБУЙТЕ ЭТО. ЛЕГКО! Я думаю, что это может быть популярным в будущем

            <a href="#openModal">OPEN</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close"  class="close">X</a>
                    <h2>MODAL</h2>

                </div>
            </div>


.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}

.modalDialog:target {
    display: block;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}