[Javascript] jQuery를 사용하여 간단한 팝업을 생성하는 방법


Answers

jQuery UI 대화 상자를 확인하십시오. 당신은 이것을 다음과 같이 사용할 것입니다 :

jQuery :

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

마크 업 :

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

끝난!

가장 간단한 유즈 케이스에 대해 염두에 두라. 설명서 를 읽으면 무엇을 할 수 있는지 더 잘 이해할 것을 제안한다.

Question

나는 웹 페이지를 디자인하고있다. div라는 메일의 내용을 클릭하면 전자 메일 및 텍스트 상자 레이블이 포함 된 팝업 창이 어떻게 표시됩니까?




다음은 매우 간단한 팝업입니다 :

<!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 입니다.




매우 가벼운 Modal 팝업 플러그인. POPELT - http://welbour.com/labs/popelt/

가볍고, 중첩 된 팝업을 지원하고, 객체 지향적이며, 동적 인 버튼을 지원하고, 응답 성이 뛰어납니다. 다음 업데이트에는 Popup Ajax 양식 제출 등이 포함됩니다.

언제든지 피드백을 사용하고 트윗하십시오.







나는 이것이 간단한 jquery 팝업을 작성하는 훌륭한 자습서 라고 생각한다. 게다가 그것은 매우 beautiful 보인다.




Links