1. 홈
  2. 질의 응답
  3. 내 팝업 창이 jsfiddle에서 작동하지만 내 사이트에서는 작동하지 않습니다.

내 팝업 창이 jsfiddle에서 작동하지만 내 사이트에서는 작동하지 않습니다.

2012-10-31 2 views
1

버튼으로 팝업 창을 구현하려는 작은 프로젝트에서 일하고 있습니다. 이 개발자 사이트에서 찾은 코드를 사용하고 있습니다 bPopup. 나는 JSFiddle에서 코드를 가지고 놀았지만 작동한다. 그러나 코드를 내 사이트에 올렸을 때 작동하지 않는다. jquery 및 bpopup 자바 스크립트 파일을 참조하는 방식으로 놀아 보았습니다. 또한 DOM 준비 문제를 살펴본 결과 나는 괜찮다고 생각하지만 어쩌면 틀렸을 수도 있습니다.내 팝업 창이 jsfiddle에서 작동하지만 내 사이트에서는 작동하지 않습니다.

이 세 파일을 사용하여 사이트를 실행하면 출력은 버튼을 클릭 할 때 아무 것도 일어나지 않고 iframe의 비디오가 단추를 클릭하기 전에 표시됩니다. 사전에 어떤 도움을 주셔서 감사합니다 !!

html로 (파일 이름 blog.html, 그것은 내 index.html 파일에 링크) :

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="animate.css"/> 
    <script src="bPopup.js"></script> 
    <script src="jquery-1.8.2.min.js"></script> 
    <meta name ="viewport" content = "width=640, user-scalable=yes"> 
    <title>OneLine</title> 
</head> 
<body> 
    <!-- Button that triggers the popup --> 
    <button id="my-button">POP IT UP</button> 
    <!-- Element to pop up --> 
    <div id="element_to_pop_up"> 
     <a class="bClose"></a> 
    <iframe width="280" height="157.5" src="http://www.youtube.com/embed/iw8wDinJxBQ" frameborder="0" allowfullscreen></iframe> 
    </div> 
</body> 
</html>

CSS (파일 이름 animate.css) :

/* PopUp Window */ 
#element_to_pop_up { 
    background-color:#000000; 
    border-radius:15px; 
    color:#000; 
    display:none; 
    padding:20px; 
    min-width:300px; 
    min-height: 400px; 
} 
.bClose{ 
    cursor:pointer; 
    position:absolute; 
    right:10px; 
    top:5px; 
}

자바 스크립트 (파일 이름 bPopup.js) :

// Semicolon (;) to ensure closing of earlier scripting 
    // Encapsulation 
    // $ is assigned to jQuery 
    ;(function($) { 

     // DOM Ready 
     $(function() { 

      // Binding a click event 
      // From jQuery v.1.7.0 use .on() instead of .bind() 
      $('#my-button').on('click', function(e) { 

       // Prevents the default action to be triggered. 
       e.preventDefault(); 

       // Triggering bPopup when click event is fired 
       $('#element_to_pop_up').bPopup(); 

      }); 

     }); 

    })(jQuery); 

/********************************************************************************* 
* @name: bPopup 
* @author: (c)Bjoern Klinggaard (http://dinbror.dk/bpopup - [email protected]) 
* @version: 0.7.0.min 
*********************************************************************************/ 
(function(b) { 
    b.fn.bPopup = function(n, p) { 
     function t() { 
      b.isFunction(a.onOpen) && a.onOpen.call(c); 
      k = (e.data("bPopup") || 0) + 1; 
      d = "__bPopup" + k; 
      l = "auto" !== a.position[1]; 
      m = "auto" !== a.position[0]; 
      i = "fixed" === a.positionStyle; 
      j = r(c, a.amsl); 
      f = l ? a.position[1] : j[1]; 
      g = m ? a.position[0] : j[0]; 
      q = s(); 
      a.modal && b('<div class="bModal ' + d + '"></div>').css({ 
       "background-color": a.modalColor, 
       height: "100%", 
       left: 0, 
       opacity: 0, 
       position: "fixed", 
       top: 0, 
       width: "100%", 
       "z-index": a.zIndex + k 
      }).each(function() { 
       a.appending && b(this).appendTo(a.appendTo) 
      }).animate({ 
       opacity: a.opacity 
      }, a.fadeSpeed); 
      c.data("bPopup", a).data("id", d).css({ 
       left: !a.follow[0] && m || i ? g : h.scrollLeft() + g, 
       position: a.positionStyle || "absolute", 
       top: !a.follow[1] && l || i ? f : h.scrollTop() + f, 
       "z-index": a.zIndex + k + 1 
      }).each(function() { 
       a.appending && b(this).appendTo(a.appendTo); 
       if (null != a.loadUrl) switch (a.contentContainer = b(a.contentContainer || c), a.content) { 
       case "iframe": 
        b('<iframe scrolling="no" frameborder="0"></iframe>').attr("src", a.loadUrl).appendTo(a.contentContainer); 
        break; 
       default: 
        a.contentContainer.load(a.loadUrl) 
       } 
      }).fadeIn(a.fadeSpeed, function() { 
       b.isFunction(p) && p.call(c); 
       u() 
      }) 
     } 
     function o() { 
      a.modal && b(".bModal." + c.data("id")).fadeOut(a.fadeSpeed, function() { 
       b(this).remove() 
      }); 
      c.stop().fadeOut(a.fadeSpeed, function() { 
       null != a.loadUrl && a.contentContainer.empty() 
      }); 
      e.data("bPopup", 0 < e.data("bPopup") - 1 ? e.data("bPopup") - 1 : null); 
      a.scrollBar || b("html").css("overflow", "auto"); 
      b("." + a.closeClass).die("click." + d); 
      b(".bModal." + d).die("click"); 
      h.unbind("keydown." + d); 
      e.unbind("." + d); 
      c.data("bPopup", null); 
      b.isFunction(a.onClose) && setTimeout(function() { 
       a.onClose.call(c) 
      }, a.fadeSpeed); 
      return !1 
     } 
     function u() { 
      e.data("bPopup", k); 
      b("." + a.closeClass).live("click." + d, o); 
      a.modalClose && b(".bModal." + d).live("click", o).css("cursor", "pointer"); 
      (a.follow[0] || a.follow[1]) && e.bind("scroll." + d, function() { 
       q && c.stop().animate({ 
        left: a.follow[0] && !i ? h.scrollLeft() + g : g, 
        top: a.follow[1] && !i ? h.scrollTop() + f : f 
       }, a.followSpeed) 
      }).bind("resize." + d, function() { 
       if (q = s()) j = r(c, a.amsl), a.follow[0] && (g = m ? g : j[0]), a.follow[1] && (f = l ? f : j[1]), c.stop().each(function() { 
        i ? b(this).css({ 
         left: g, 
         top: f 
        }, a.followSpeed) : b(this).animate({ 
         left: m ? g : g + h.scrollLeft(), 
         top: l ? f : f + h.scrollTop() 
        }, a.followSpeed) 
       }) 
      }); 
      a.escClose && h.bind("keydown." + d, function(a) { 
       27 == a.which && o() 
      }) 
     } 
     function r(a, b) { 
      var c = (e.width() - a.outerWidth(!0))/2, 
       d = (e.height() - a.outerHeight(!0))/2 - b; 
      return [c, 20 > d ? 20 : d] 
     } 
     function s() { 
      return e.height() > c.outerHeight(!0) + 20 && e.width() > c.outerWidth(!0) + 20 
     } 
     b.isFunction(n) && (p = n, n = null); 
     var a = b.extend({}, b.fn.bPopup.defaults, n); 
     a.scrollBar || b("html").css("overflow", "hidden"); 
     var c = this, 
      h = b(document), 
      e = b(window), 
      k, d, q, l, m, i, j, f, g; 
     this.close = function() { 
      a = c.data("bPopup"); 
      o() 
     }; 
     return this.each(function() { 
      c.data("bPopup") || t() 
     }) 
    }; 
    b.fn.bPopup.defaults = { 
     amsl: 50, 
     appending: !0, 
     appendTo: "body", 
     closeClass: "bClose", 
     content: "ajax", 
     contentContainer: null, 
     escClose: !0, 
     fadeSpeed: 250, 
     follow: [!0, !0], 
     followSpeed: 500, 
     loadUrl: null, 
     modal: !0, 
     modalClose: !0, 
     modalColor: "#000", 
     onClose: null, 
     onOpen: null, 
     opacity: 0.7, 
     position: ["auto", "auto"], 
     positionStyle: "absolute", 
     scrollBar: !0, 
     zIndex: 9997 
    } 
})(jQuery);

모든 파일은 내 사이트의 같은 디렉터리에 있습니다.

편집 : 다음은 콘솔 오류

[18:14:51.018] GET http://www.onelineco.net/Blog.html [HTTP/1.1 200 OK 47ms] 
[18:14:51.076] GET http://www.onelineco.net/animate.css [HTTP/1.1 304 Not Modified 68ms] 
[18:14:51.077] GET http://www.onelineco.net/bPopup.js [HTTP/1.1 304 Not Modified 68ms] 
[18:14:51.078] GET http://www.onelineco.net/jquery-1.8.2.min.js [HTTP/1.1 404 Not Found 78ms] 
[18:14:51.106] ReferenceError: jQuery is not defined @ http://www.onelineco.net/bPopup.js:23 
[18:14:51.201] GET http://www.onelineco.net/jquery-1.8.2.min.js [HTTP/1.1 404 Not Found 61ms] 
[18:14:51.232] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://www.onelineco.net/Blog.html 
[18:14:51.285] GET http://www.youtube.com/embed/iw8wDinJxBQ [HTTP/1.1 200 OK 141ms] 
[18:14:51.386] Unrecognized at-rule or error parsing at-rule '@-moz-viewport'. @ http://www.youtube.com/embed/iw8wDinJxBQ:14 
[18:14:51.386] Unrecognized at-rule or error parsing at-rule '@viewport'. @ http://www.youtube.com/embed/iw8wDinJxBQ:17 
[18:14:51.391] Error in parsing value for 'filter'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.391] Unknown property '-moz-border-radius'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.391] Unknown property '-moz-box-shadow'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.391] Error in parsing value for 'background-image'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.391] Expected declaration but found '*'. Skipped to next declaration. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.393] Expected media feature name but found '-webkit-min-device-pixel-ratio'. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.393] Unknown property 'box-sizing'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.393] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.393] Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.411] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.411] Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.411] Error in parsing value for 'cursor'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.413] Unknown property '-moz-background-size'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.416] Error in parsing value for 'background'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-embed-vflkVRvOv.css:1 
[18:14:51.877] Expected declaration but found '*'. Skipped to next declaration. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.877] Unknown property '-moz-border-radius'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.877] Error in parsing value for 'filter'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.877] Unknown property '-moz-box-shadow'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.877] Error in parsing value for 'background-image'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.879] Expected media feature name but found '-webkit-min-device-pixel-ratio'. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.879] Unknown property 'box-sizing'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.879] Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.879] Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.880] Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.880] Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.880] Error in parsing value for 'cursor'. Declaration dropped. @ http://s.ytimg.com/yts/cssbin/www-player-actions-vflaifYoV.css:1 
[18:14:51.886] Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. @ resource://dwhelper/util-service.jsm:567 
[18:14:51.886] Use of attributes' ownerDocument attribute is deprecated. @ resource://dwhelper/util-service.jsm:567 
[18:14:51.886] Use of attributes' nodeType attribute is deprecated. It always returns 2. @ resource://dwhelper/util-service.jsm:571 
[18:14:51.886] Use of attributes' firstChild attribute is deprecated. Use value instead. @ resource://dwhelper/util-service.jsm:580

출처

2012-10-31 Eric_S

+2

확인 오류 콘솔, 특히 '불법 token' – Musa

+0

내가 Aptana에 3을 사용하고 있습니다와의 .js이 파일에 내가 어떤 오류를 확인 해달라고. –

+0

브라우저의 콘솔을 확인하십시오 (사용 가능한 경우 F12 키를 누르십시오) – Musa

답변

0

당신은 그것을에 의존하는 다른 스크립트 전에 jQuery를로드 할 필요를 실행할 때 내가 GET 오류입니다.

<script src="jquery-1.8.2.min.js"></script> 
<script src="bPopup.js"></script>

출처

2012-11-01 01:23:58 Musa

+0

아, 수정했으나 여전히 작동하지 않습니다. 이러한 모든 오류 중이 것은 흥미로운 것으로 보입니다. [18 : 29 : 58.118] ReferenceError : jQuery는 @ http://www.onelineco.net/bPopup.js:23로 정의되지 않았습니다. –

+0

이것은 23 번째 줄의 bpopup.js 파일}} (jQuery); –

+0

@Eric_S 자신의 스크립트 앞에 jQuery를 배치하면 더 이상 ReferenceError가 없어야합니다. – Musa

관련 문제

 관련 문제