jQuery를 사용하여 간단한 팝업을 생성하는 방법
저는 웹 페이지를 디자인하고 있습니다.div named 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>
상황에 따라서는 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 대화상자를 확인합니다.다음과 같이 사용할 수 있습니다.
jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
마크업:
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
알았어!
이것은 가장 단순한 사용 사례에 관한 것입니다.이 매뉴얼을 읽고 이 매뉴얼로 무엇을 할 수 있는지 자세히 알아보는 것이 좋습니다.
ColorBox라는 jQuery 플러그인을 사용하고 있습니다.
- 매우 사용하기 쉽다
- 경량
- 커스터마이즈 가능한
- jQuery에 대해 지금까지 본 팝업 대화 상자 중 가장 멋진 대화 상자
이 URL에 접속하다
Magnificate Popup을 사용해 보세요.응답성과 무게는 약 3KB입니다.
이것은 간단한 jquery 팝업 작성에 대한 훌륭한 튜토리얼이라고 생각합니다.게다가 매우 아름다워 보인다.
이 예에 대해서는, http://www.queness.com/post/77/simple-jquery-modal-window-tutorial 를 참조해 주세요.
초경량 모달 팝업 플러그인입니다.POPELT - http://welbour.com/labs/popelt/
경량, 중첩된 팝업, 객체 지향, 동적 버튼, 응답성 등을 지원합니다.다음 업데이트에는 팝업 에이잭스 폼 제출 등이 포함됩니다.
자유롭게 사용하고 피드백을 트윗해 주세요.
해 보자...HTML, CSS 및 jquery를 사용하여 간단한 팝업을 작성하는 방법...
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 700px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 100px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
@media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Title of Popup </h2>
<p>Popup 1 content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>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();
};
})();
다음은 매우 간단한 팝업입니다.
<!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's 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은 다음과 같습니다.
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);
}
언급URL : https://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery
'programing' 카테고리의 다른 글
| VueJ가 어레이 길이 변경에 응답하지 않습니까? (0) | 2022.11.30 |
|---|---|
| Vue.js 엄밀한 모드에서는 허용되지 않는 속성의 다중 정의 (0) | 2022.11.30 |
| Python에서 여러 값을 목록에 추가하는 방법 (0) | 2022.11.30 |
| 어떤 Java Maven 버전을 사용하여 실행하는지 확인하고 변경하려면 어떻게 해야 합니까? (0) | 2022.11.30 |
| 넷빈을 실행하는 Java 플랫폼 변경 (0) | 2022.11.30 |