Highslide - 닫기 버튼이있는 드래그 가능한 헤더

Question

[편집 : 답변을 얻었지만 동일한 페이지에 여러 개의 HTML 확장기가있는 경우 작동하지 않습니다. 내 new question을 참조하십시오.]

이것은 쉽게 할 수 있어야합니다! htmlExpand를 사용하고 있습니다.

내가 Highslide에서 원하는 것은 여기에 표시된 것처럼 오른쪽에 X가있는 draggable 헤더입니다. 나는 이것이 내장되어 있지 않고 즉시 비상 사태로 움직일 준비가되어 있다는 것에 놀랐지만, 슬프게도 "거의"작동하는 것처럼 보입니다.

그래픽에서 제목 텍스트의 회색/파란색 배경은 드래그 가능한 영역을 나타냅니다. (반투명 한 .png를 .highslide-heading의 배경으로 사용하고 있습니다 .X 그래픽이 실제로 그 뒤에 있습니다.)

나는 draggable 영역을 오른쪽으로 거의 끝까지 확장하여 X의 몇 픽셀 밖에 없으므로 거의 모든 헤더가 윈도우처럼 드래그 가능합니다.

위의 그림에서 하이 슬라 드 머리글의 너비는 100 %이고 X는 드래그 가능한 공간의 "뒤에"있으므로 클릭 할 수 없습니다. .highslide-heading의 너비를 90 %로 변경하면 작동하지만 회색 영역이 짧아서 이상하게 보입니다.

물론 백분율을 실험 해 볼 수는 있지만 같은 페이지에 몇 개의 팝업 항목이 있습니다. 크기가 다양하기 때문에 특정 비율이 모두에게 적합하지 않습니다. (결과는 브라우저에 따라 다릅니다.)

다른 방법과 달리 htmlExpand를 계속 사용하고 싶습니다. 따라서 팝업되는 내용에 유연하게 대응할 수 있습니다. (그림과 캡션이기 때문에 여기에 표시된 예가 Highslide에서 확장하기 위해 다른 방법을 쉽게 사용할 수 있음을 알고 있습니다.)

해결 방법 : 여하튼, 닫기 단추가 " 드래그 가능한 공간의 맨 위에 "표시됩니다. 내가 필요로하는 CSS 속성은 Z- 색인이라고 생각하지만 어디서 어떻게 삽입해야하는지 전혀 모른다. .CSS 파일에 아무런 영향을 미치지 않는 것 같습니다.

도움을 주시면 대단히 감사하겠습니다. I DO는 올바른 답을하고 upvote 사람을 확인하십시오.

Answer 1

당신은 EarlyOut에 의해 제안 hs.registerOverlay를 사용하거나 (당신이 전역 설정으로 사용하는 것을 선호하는 경우 또는 hs.wrapperClassName = 'draggable-header';) 당신은 미리 만들어진 wrapperClassName: 'draggable-header'을 사용할 수 있습니다 CSS에서.

나는 이미 wrapperClassName: 'draggable-header'을 사용하고 있다고 가정하지만 올바른 CSS 선택기에 헤더의 배경색을 추가하여 원하는 것을 얻을 필요가 있으며 투명한 X (닫기) 그래픽 파일과 몇 줄의 추가 CSS가 있습니다.
다음을 참조하십시오. jsFiddle : http://jsfiddle.net/roadrash/mXmLN/

Answer 2

이것은 당신이 올바른 방향으로 지적 받아야합니다. 이 데모 페이지에 RoadRash의 코드를 살펴 보자 :

http://www.roadrash.no/hs-support/iframe-closebutton-redirect.html

그러나 당신이 원하기 때문에 정기적으로 "가까이"를 X에, 오히려 리디렉션보다 표준에 오버레이에서 "HTML"속성을 변경 : 당신은 몇 가지 변화를 요구 모든 것을 할 수있는

html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',