어떻게 jQuery를 사용하여 간단한 팝업을 생성하는

해결법

1.먼저 CSS는 - 그러나 당신이 좋아 조정할 :

먼저 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>

여기 jsfiddle 데모 및 구현이다.

상황에 따라 당신은 아약스 호출을 통해 팝업 내용을로드 할 수 있습니다. 그것은 내용을보기 전에 사용자에게 더 중요한 지연을 줄 수 있으므로이 가능한 경우를 방지하는 것이 가장 좋습니다. 여기에 몇 당신이이 방법을 가지고가는 경우에 만들고 싶어거야 변경합니다.

HTML이된다 :

<div>
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a>
</div>

그리고 자바 스크립트의 일반적인 생각이된다 :

$("#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;
});

2.jQuery를 UI 대화 상자를 확인하십시오. 이처럼 사용합니다 :

jQuery를 UI 대화 상자를 확인하십시오. 이처럼 사용합니다 :

JQuery와 :
```
$(document).ready(function() {
    $("#dialog").dialog();
});
```
마크 업 :
```
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
```
끝난!

이 간단한 사용 사례에 관하여 마음에 곰, 나는 그것을 함께 할 수있는 단지 무엇을 더 나은 아이디어를 얻기 위해 문서를 읽어 제안합니다.
3.나는 그것이, ColorBox 전화의 플러그인 jQuery를 사용할

나는 그것이, ColorBox 전화의 플러그인 jQuery를 사용할
4.Magnific 팝업을 시도, 그것은 반응이고 단지 3킬로바이트 주위 무게.

Magnific 팝업을 시도, 그것은 반응이고 단지 3킬로바이트 주위 무게.
5.이 URL을 방문

이 URL을 방문

jQuery를 UI 대화 데모
6.나는이 간단한 JQuery와 팝업을 쓰기에 좋은 튜토리얼 생각합니다. 게다가 그것은 매우 아름다워

나는이 간단한 JQuery와 팝업을 쓰기에 좋은 튜토리얼 생각합니다. 게다가 그것은 매우 아름다워
7.좋은, 여기 정확히이의 간단한 예제가있다 : http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

좋은, 여기 정확히이의 간단한 예제가있다 : http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
8.매우 경량 모달 팝업 플러그인. POPELT - http://welbour.com/labs/popelt/

매우 경량 모달 팝업 플러그인. POPELT - http://welbour.com/labs/popelt/

그것은 경량, 지원 중첩 된 팝업, 객체 지향, 지원 동적 버튼, 반응, 그리고 더 많은. 다음 업데이트는 팝업 아약스 양식의 제출 등이 포함됩니다

사용하고 트윗 피드백 주시기 바랍니다.

9.HTML5와 자바 스크립트를 사용하여 간단한 팝업 창.

HTML5와 자바 스크립트를 사용하여 간단한 팝업 창.

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();  
            };
        })();

10.다음은 아주 간단한 팝업입니다 :

다음은 아주 간단한 팝업입니다 :

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

11.만 CSS 팝업 LOGIC! IT를 DO보십시오. 쉬운! 나는이 mybe는 미래에 해킹 인기를 생각한다

만 CSS 팝업 LOGIC! IT를 DO보십시오. 쉬운! 나는이 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);
}

from https://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 객체의 HTMLCollection, NodeLists 및 배열의 차이 (0)	2020.10.10
[JQUERY] 템플릿의 jQuery 엔진 [폐쇄] (0)	2020.10.10
[JQUERY] jQuery로 구문 분석 RSS (0)	2020.10.10
[JQUERY] 구글의 CDN에서 jQuery를 UI CSS를 다운로드 (0)	2020.10.10
[JQUERY] jQuery를 $ 대 document.getElementById를 () (0)	2020.10.10

복붙노트

[JQUERY] 어떻게 jQuery를 사용하여 간단한 팝업을 생성하는

어떻게 jQuery를 사용하여 간단한 팝업을 생성하는

해결법

1.먼저 CSS는 - 그러나 당신이 좋아 조정할 :

2.jQuery를 UI 대화 상자를 확인하십시오. 이처럼 사용합니다 :

3.나는 그것이, ColorBox 전화의 플러그인 jQuery를 사용할

4.Magnific 팝업을 시도, 그것은 반응이고 단지 3킬로바이트 주위 무게.

5.이 URL을 방문

6.나는이 간단한 JQuery와 팝업을 쓰기에 좋은 튜토리얼 생각합니다. 게다가 그것은 매우 아름다워

7.좋은, 여기 정확히이의 간단한 예제가있다 : http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

8.매우 경량 모달 팝업 플러그인. POPELT - http://welbour.com/labs/popelt/

9.HTML5와 자바 스크립트를 사용하여 간단한 팝업 창.

10.다음은 아주 간단한 팝업입니다 :

11.만 CSS 팝업 LOGIC! IT를 DO보십시오. 쉬운! 나는이 mybe는 미래에 해킹 인기를 생각한다

'JQUERY' 카테고리의 다른 글

티스토리툴바