아름다운 팝업을 만들기 위한 웹 프런트엔드 디자인 패턴

.TipDiv
{
너비:500px;
높이:120px
border-top:solid 5px
테두리-하단:솔리드 5px #a6c9e2;
테두리-왼쪽:솔리드 1px #a6c9e2;
테두리-오른쪽:솔리드 1px #a6c9e2
배경:#ffffff; 10;/*z-index는 매우 중요합니다. 페이지에서 Div 상자의 쌓인 순서를 결정합니다.*/
position:absolute;/*절대 위치 지정, 요소가 위쪽 및 왼쪽에 따라 쌓일 수 있는지 결정합니다. 기타 요소*/
}
.TipDiv img
{
width:110px;
height:110px;
margin-right:36px
margin-left:10px;
float:left;
}
.TipDiv 범위
{
/*×*/
너비:340px
높이:110px
float:left ;
word-break:break-all;
border-top:dashed 1px #3a7ac8;
margin-top:8px
}


다음은 스크립트입니다. , 마우스가 지나갈 때만 팝업 상자 이벤트에 응답:

//제목 마우스가
$("ul li a").mousemove(function(e){
$를 넘어갑니다. (".TipDiv").remove( );//페이지에 해당 요소가 있으면 해당 요소를 제거합니다...0
var x=e.clientX 10;//마우스의 x축 좌표를 가져옵니다.
var y=e.clientY 10; //마우스의 y축 좌표를 가져옵니다.
var num=$(this).attr("id")
var imgs; word;
var name;
switch(num )
{
case "1":{ imgs="images/mimi.bmp"; name="비밀 론다 번..." ; ="이것은 신성한 비밀의 정원입니다. 앨리스가 살고 있습니다..." }
case "2":{ imgs="images/mama.bmp" name="어머니의 추억 사랑 그룹..." ; word "이것은 모든 중국인을 감염시킨 어머니에 대한 이야기입니다. 그녀는 보소조쿠 어머니이자 아들에게 간을 기증하는 어머니이기도 합니다. 그녀는 또한 훌륭하고 전형적인 중국 어머니입니다..." ; >case "3":{ imgs="images/nikesong.bmp"; name="닉 할아버지가 들려주는 이야기 (버터워스, 이란)..." ; word="★오늘의 세계 최고의 동화작가이자 일러스트레이터!
★1992년 영국 도서상 수상
★그가 만든 그림책은 전 세계에서 15분마다 구매되고 있습니다
★그의 그림책은 독서를 즐겁게 만들어줍니다! " ; break; }
case "4":{ imgs="images/lqz.bmp"; name="리칭자오: 인생은 그저 화려한 꽃일 뿐입니다(웨이치)..." ; word=""리칭자오 : 『인생은 찬란한 꽃사례』는 이안의 시 50편을 선정한 『무릉춘』에서 시작하여 『좋은 일이 곧 온다(바람이 진다)』로 끝난다. 그리고 꽃은 깊이 떨어지고 있습니다)". 기사 전체를 자연스럽고 우아하며 진지하게 분석하고 설명하며, 가혹하거나 설교하지 않고 설득력 있게 전달됩니다. " ; break; }
}
popDiv(imgs,name,word,x,y);
})
//마우스 제목이
$("ul li a")로 남습니다. . mouseout(function(){
$(".TipDiv").remove();
})
})

//마우스로 움직이는 정보 상자
function popDiv (face,name,info,xx,yy)
{
var str=""
str ="