MSN 스타일의 팝업창을 웹 브라우저에서...

정말 글 올리기 힘들구만... -_- 이게 몇번째냐... 떱...

 

 

EeakSoft라는 곳에서 만든 컨트롤을 한글로 번역하고 상황에 맞게 컨버팅했다.

PopupWin.zip

 

Visual Studio.NET의 도구 - 도구상자 항목 추가/제거를 선택한 다음 첨부한 dll 파일을 추가해 넣어주면 도구 상자의 '일반'항목에서 볼 수 있다. ASP.NET 디자인 뷰에서 끌어다 놓기만 하면 사용준비 끝.

 

[PopupWin]

[PopupWinAnchor]

 

요 두가지가 있는데 위의 클래스는 실제 팝업창을 표시해주는 클래스고, 아래 클래스는 웹 브라우저의 컨트롤 및 이벤트와 연결하는 역할을 해주는 클래스이다.

 

간단히 끌어다 놓으면 자동 생성되는 코드들이지만, 대략 사용법을 써 보면 다음과 같다.

 

[HTML 뷰에서...]

 

맨 윗줄에 컨트롤을 추가해준다.

<%@ Register TagPrefix="cc1" Namespace="Nets.Common.Web" Assembly="Nets.Common.Web.PopupWin" %>

필요한 곳에 실제 인스턴스를 만든다.

<cc1:PopupWin id="popupWin" runat="server" DESIGNTIMEDRAGDROP="163" />

 

[코드 뷰에서...]

 

편의를 위해 네임스페이스를 using 해준다.

using Nets.Common.Web;

 

HTML 뷰에서 추가한 컨트롤 인스턴스를 선언한다.

protected Nets.Common.Web.PopupWin popupWin;

 

 

아래 예는 페이지가 로드되면서 오른쪽 아래부분에서 팝업창이 뜨도록 한 예제이다.

 

private void Page_Load(object sender, System.EventArgs e)

{

   message = "죽을래?<br><br><br><b>[자세히 보려면 클릭해봐]</b>";

   popupWin.Title = "뭔데?";

   popupWin.Message = message;

   popupWin.Text = "자꾸 까불면 죽는다~ 엉? 알갔어??";

   popupWin.ActionType = PopupAction.MessageWindow;

   popupWin.DockMode = PopupDocking.BottomRight;

   popupWin.DragDrop = false;

   popupWin.ShowAfter = 0;

   popupWin.HideAfter = 5000;

   popupWin.ColorStyle = PopupColorStyle.Red;

   popupWin.Visible = true;

}

 

PopupWinAnchor는 다음과 같이 사용한다.

<cc1:PopupWin id="popupTest" title="제목" runat="server" Text="팝업창의 메시지를 클릭할때 뜨는 새창에 표시할 본문글" Message="팝업창에 나타날 간단한 메시지" DockMode="BottomLeft" ColorStyle="Violet" />

<cc1:PopupWinAnchor id="showTest" runat="server" LinkedControl="btnShow" PopupToShow="popupTest" newmessage="새로 보일 메시지" newtext="팝업창의 메시지를 클릭할 때 뜨는 새창에 표시할 새 본문글" newtitle="새 제목" changetexts="True" />

<input id="btnShow" type="button" value="팝업 보이기">

 

다음은 텍스트 박스에 포커스가 생길때 팝업창을 보이게 하는 예제이다.

<cc1:PopupWinAnchor id="showTest" runat="server" popuptoshow="popupWin" linkedcontrol="txtTest" handledevent="onfocus" newtitle="포커스" newtext="적절한 값을 입력하세요...<br>제발 제대로 된 값을 넣어주시기 바랍니다. 네?" newmessage="적절한 값을 입력하세요..." changetexts="True" />

<input id="txtTest" type="button" value="팝업 보이기">