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

Question

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

Я нашел необходимая вещь плагина taglist. Это перечисляет все теги, о которых это знает (файлы, которые Вы открыли) в отдельном окне, и делает очень легким переместиться по большим файлам.

я использую его главным образом для разработки Python, но это может только быть лучше для C/C++.

215

javascript jquery css ajax popup

задан Andy Gaskell 3 August 2017 в 13:23

4 ответа

Ознакомьтесь с диалоговым окном jQuery UI . Вы бы использовали его так:

JQuery:

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

Разметка:

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

Готово!

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

97

ответ дан 23 November 2019 в 04:21

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

3

ответ дан 23 November 2019 в 04:21

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

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

23

ответ дан 23 November 2019 в 04:21

Другие вопросы по тегам:

javascript jquery css ajax popup

Похожие вопросы:

score 240 · Accepted Answer

Сначала 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;
});