JS/jquery
Custom JavaScript Dialog Boxes
Anna 안나
2008. 11. 13. 00:57
Custom JavaScript Dialog Boxes는 우리가 흔히 만나는 Javascript 경고창(로그인시 비밀번호를 입력해 달라는등의 경고창)을 예쁘게 커스터마이징해서 보여주는 Javascript 라이브러리다. 4.5kb 정도의 아주 작은 용량으로 CSS 파일과 몇개의 이미지, 그리고 라이브러리 파일인 JS 파일이 있다. 간단하게는 단순 경고문 박스로도 이용 할 수 있지만 Wordpress나 Zeroboard XE같은 Generator 파일을 직접 손봐서 경고창 자체를 시스템내에 직접 적용하는 편이 훨씬 활용도가 높다. 따라서 디자이너보다는 개발자측에서 더 유용하게 사용 될 수 있다. 총 4개의 Theme Set로 구성되어 있는데, Error 박스, Warining 박스, Success 박스, Prompt 박스로서 Javascript 경고창이 가지는 모든 속성을 커버한다. 각 박스마다 각각의 용도에 맞는 디자인이 짜여져 있다. 이것들은 첨부된 CSS 파일을 직접 만지므로 해서 디자인 자체를 커스터마이징 할 수도 있다. IE 6/7, FireFox 2/3, Opera와 Safari에서도 검증 된 높은 접근성과 웹 표준지향 코드이므로 웹 규격에 맞게 개인 블로그나 사이트를 제작하는 디자이너나 개발자들에게 큰 도움이 된다. From Original I have put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. There is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files. The Divs are dynamically added to the DOM when the function is called. The function currently relies on a content wrapper to calculate the page height however you could use the body height but the background overlay would only cover the currently visible content. The variable for the wrapper ID as well as the speed and timer settings are available at the top of the JavaScript file.