2013-11-21 4 views
0

나는 더 효율적인 방법이 있다는 것을 알고 있지만 이렇게하는 이유는 있습니다. 모달 팝업 창이 있습니다. 방문자가 페이지를로드하자마자이 창을 팝업하고 싶습니다. 현재로서는 index.php # login_form으로 연결되는 링크를 클릭하면 창이 열리고 열립니다.첨부 된 페이지를로드하는 방법 페이지로드시

"#login_form"이 페이지로드시 URL을 추가하고 싶습니다. 그런 다음 처음 팝업이로드되면 이탈을 선택할 수 있습니다.

이제는 내 CSS 또는 코드를 많이 변경하지 않고도이 작업을보다 효율적으로 수행 할 수있는 방법이 있습니까?

감사합니다.

+0

'모달 팝업 창'은 부트 스트랩처럼 들립니다. 부트 스트랩 팝업 창을 사용하고 계시거나 맞춤 팝업을 만드시겠습니까? – Gaurav

+0

여기 하나 사용 http://www.script-tutorials.com/css3-modal-popups/ – user2833068

+0

"#login_form"을 페이지로드시 트리거하는 방법을 알 수 없습니다.심지어 PHP 헤더 위치를 시도 : – user2833068

답변

0

쉬운 방법 중 하나는 해시 태그 login_form 직접 페이지를로드하는 것입니다

http://www.script-tutorials.com/demos/222/index.html#login_form 

또는 당신은이 같은 JQuery와 사용할 수 있습니다 더 "정확한"가 되길 원한다면 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<body> 

<!--Place this at the end of the body tag.--> 
<script> 
$(function(){ 
    window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url 
}) 
</script> 


윈도우가로드 될 때 jquery를 사용하여 모달을 표시 할 수 있습니다. 시도해보십시오. 이 코드는 이해할 수 있습니다 :

$(function(){ 
    alert("Done loading"); 
}) 

경고 기능 대신 모달을 표시하는 코드를 추가합니다. jQuery 라이브러리를 가져 가지고 있는지 확인

$(".element").removeClass("hideModal"); 

: 모달가 표시하거나 CSS로 숨겨져있는 경우, 당신은 쉽게와 요소에 CSS 클래스를 추가 할 수 있습니다

$(".element").addClass("showModal); 

또는으로 클래스를 제거 . 이 질문에 대한 답변이되기를 바랍니다.

+0

죄송합니다, 꽤 익숙하지 않은 jquery를 수행하거나 당신이 제안한 것을 씁니다. 나는 그것을 빨리 집어들 수있다. 나는 어떻게 이것을 쓸 것인가? – user2833068

+0

지금 당장 튜토리얼을보고 있습니다 ... 잠깐만 기다려주십시오. –

+0

그래, 고마워, 고마워. – user2833068

2

url의 해시는 javascript의 window.location.hash을 통해 액세스 할 수 있습니다. 바디 온로드 이벤트에서 이것을 판단 할 수 있습니다.

+0

당신은 나를 때려 : D –

+0

이것은 내 것이 더 좋고 간단합니다. – Gaurav

+0

당신의 노력에 감사드립니다. =) – user2833068

1

나는 당신의 질문에 대답하기 위해 당신의 예를 들고 당신이 찾고있는 것을 해결하는 바이올린을 만들었습니다. 기본적으로이 코드가 무엇을하고 있는지

http://jsfiddle.net/sgaurav/xA4vG/,이 코드는 온로드 이벤트를 사용하면 시뮬레이션 할 클릭의 ID를 선택하고 다음 지금 How do I simulate user clicking a link in JQuery?

$.fn.simulateClick = function() { 
    return this.each(function() { 
     if('createEvent' in document) { 
      var doc = this.ownerDocument, 
       evt = doc.createEvent('MouseEvents'); 
      evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null); 
      this.dispatchEvent(evt); 
     } else { 
      this.click(); // IE 
     } 
    }); 
} 

여기에 주어진 대답에 따라 클릭에 대한 마우스 이벤트를 생성 지금 회전 부하에

jQuery(document).load(
    jQuery('#join_pop').simulateClick() 
); 

이를 사용까지 수동으로하고있는 링크를 가짜 클릭에 몸은 빨리 페이지가 열릴 때 팝업. 원하는 경우 마지막 코드의 ID를 로그인 양식으로 변경할 수 있습니다. 그러면 로그인하는 대신 페이지로드시에 표시되기 시작합니다.

+0

귀하의 방법은 기본 URL에 전혀 영향을 줍니까? – user2833068

+0

네, 그렇습니다. 클릭이 가짜가되면 수동 클릭이해야하는 모든 작업을 수행하며 맨 위에 #join_form을 추가하는 작업을 포함합니다. – Gaurav

관련 문제