2010-04-17 9 views
0

요소를 클릭 한 후 "popupmenu에서 사용자 작업을 기다리는"방법이 있습니까?jquery : 링크를 클릭하면 팝업 메뉴가 나타 납니까?

예 :

사람 A 링크 클릭 수. 사용자가이 링크로 무엇을하고 싶은지 묻는 javascript 메뉴 팝업. 사용자는 팝업 메뉴를 제외한 다른 곳을 클릭해서는 안됩니다. 사용자가 메뉴에서 작업을 클릭하면 기본 브라우저 동작이 발생합니다 (예 : 다음 페이지로 연결).

+0

어떤 "팝업 메뉴"를 사용하고 있습니까? jQuery UI 대화 상자? –

답변

0

이 같은 것을 의미합니까?

<a href='target.html' onclick='javascript:return confirm("Are you sure that you want to continue?");'>click to navigate</a> 
+0

아니, 실제 jquery 팝업 메뉴가 표시된다는 의미는 아닙니다. – wefwgeweg

+0

당신은 그 팝업 메뉴를 만드는 방법을 묻고 있습니까? 아니면 당신은 이미 그 메뉴를 가지고 있고 그것을 모달 화하고 싶습니까? –

1

모달 대화 상자에서 선택 요소를 묻는 것 같습니다. 그렇다면 이미 jquery를 사용하고있는 것처럼 jqueryUI를 사용하십시오.

0

동적으로 메뉴를 빌드하거나 스타일 페이지에 포함시켜야합니다.

그런 다음 링크를 클릭하면 이벤트 위치에 따라 x/y를 설정해야합니다.

$(document).ready(function() { 
    $('a#mylink').click(function(ev){ 
     var menu = $('div#myMenu').get(0); 
     var leftPt = ev.pageX + 'px'; 
     var topPt = ev.pageY + 'px'; 
     menu.style.display= "block"; 
     menu.style.left= leftPt; 
     menu.style.top= topPt; 
    }); 
}); 

그러나 특정 시간이 지나면 메뉴를 닫거나 "닫기"버튼/링크를 적용하는 것에 대해 걱정할 필요가 있습니다.

나는이 매우 동일한 유형의 팝업을 수행하는 방법을 항상 궁금해 했으므로 몇 달 전에 텍스트를 선택할 때 몇 가지 옵션을 보여주는 Google 크롬 확장 프로그램을 작성했습니다. 위에 나열된 것과 동일하지만 mouseup을위한 페이지를 폴링 한 다음 선택한 텍스트를 확인하고 잠시 동안 메뉴를 표시합니다. 코드를보고 사용하려는 부품을 골라 내고 싶다면 http://code.google.com/p/select-actions/source/browse/select_actions.js

지저분한 경우 사과드립니다. 약 하루 동안 만 작업했고 다시 돌아가는 의미로 계속 사용합니다. 하지만 Chrome은 상황에 맞는 메뉴에 확장 기능을 제공 할 것이므로 그때까지는 아무 것도 바꿀 필요가 없습니다.

편집 : 모달 대화 상자 측면에 대해서는 CSS로 수행됩니다. 그 코드는 여기에서 얻을 수 있습니다 : http://raven-seo-tools.com/blog/2911/create-a-modal-dialog-using-css-and-javascript

관련 문제