Я создаю веб-страницу. Когда мы нажимаем содержимое div с именем mail, как я могу показать всплывающее окно, содержащее адрес электронной почты и текстовое поле?
Что-то такое простое не требует плагина. Это может выглядеть как много кода, но это очень просто.
Сначала 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;
});
Откроется jQuery UI Dialog. Вы бы использовали его следующим образом:
jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
Разметка:
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
Готово!
Имейте в виду, что в простейшем случае использования я предлагаю прочитать документацию чтобы получить лучшее представление о том, что может с этим нужно покончить.
Я использую плагин jQuery под названием ColorBox, это
Попробуйте Magnific Popup, он реагирует и весит около 3 КБ.
Посетите этот URL
Я думаю, что это отличный учебник по написанию простого всплывающего окна jquery. Плюс это выглядит очень красивый
Чрезвычайно легкий модульный всплывающий плагин. POPELT - http://welbour.com/labs/popelt/
Он легкий, поддерживает вложенные всплывающие окна, ориентирован на объекты, поддерживает динамические кнопки, отзывчивый и многое другое. Следующее обновление будет включать в себя сообщения формы Popup Ajax и т.д.
Не стесняйтесь использовать и чирикать отзывы.
Существует хороший, простой пример именно этого: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Простое всплывающее окно с помощью 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();
};
})();
TypeError: dialog.show is not a function
ошибкой TypeError: dialog.show is not a function
. Не могли бы вы включить JSFiddle?
ТОЛЬКО ЛОГИКА ПОЛОЖЕНИЯ CSS! ПОПРОБУЙТЕ ЭТО. ЛЕГКО! Я думаю, что этот майбе будет популярным в будущем
<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);
}
Вот очень простое всплывающее окно:
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position:absolute;
background:gray;
padding:8px;
}
#content {
background:white;
padding:20px;
}
#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var modal = (function(){
// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);
});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();
});
// Open the modal
return function (content) {
$content.html(content);
// Center the modal in the viewport
$modal.css({
top: ($(window).height() - $modal.outerHeight()) / 2,
left: ($(window).width() - $modal.outerWidth()) / 2
});
$modal.show();
};
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup content.</p>");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='popup' href='#'>Simple popup</a>
</body>
</html>
Более гибкое решение можно найти в этом учебнике: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Здесь close.png для образца.