답변:
먼저 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;
}
그리고 자바 스크립트 :
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;
});
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
jQuery UI 대화 상자를 확인하십시오 . 다음과 같이 사용하십시오.
jQuery :
$(document).ready(function() {
$("#dialog").dialog();
});마크 업 :
<div id="dialog" title="Dialog Title">I'm in a dialog</div>끝난!
그것이 가장 간단한 유스 케이스에 관한 것임을 명심하십시오. 문서 로 읽을 수있는 일에 대한 더 나은 아이디어를 얻기 위해 문서 를 읽는 것이 좋습니다 .
반응이 좋고 무게가 약 3KB 인 Magnific Popup을 사용해보십시오 .
이 URL을 방문하십시오
여기에 정확하게 좋은 예가 있습니다 : http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
매우 가벼운 모달 팝업 플러그인. POPELT - http://welbour.com/labs/popelt/
가볍고 중첩 된 팝업, 객체 지향, 동적 버튼, 반응 등을 지원합니다. 다음 업데이트에는 팝업 Ajax 양식 제출 등이 포함됩니다.
의견을 자유롭게 사용하고 트윗하십시오.
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> 자바 스크립트 :-
(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오류입니다. JSFiddle을 포함시킬 수 있습니까?
다음은 매우 간단한 팝업입니다.
<!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 팝업 논리 만! 그것을 시도하십시오. 쉬운! 나는이 mybe가 미래에 인기있는 핵이라고 생각합니다.
<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);
}