>웹 프론트엔드 >JS 튜토리얼 >Javascript 경고 상자에서 '확인' 버튼의 스타일을 어떻게 지정합니까?

Javascript 경고 상자에서 '확인' 버튼의 스타일을 어떻게 지정합니까?

DDD
DDD원래의
2024-12-08 03:30:12194검색

How Can I Style the

경고 상자의 "확인" 버튼 스타일 지정

Javascript에서 Alert() 함수는 메시지가 포함된 모달 경고 상자를 표시합니다. 그리고 "확인" 버튼. 경고 상자의 전체 모양은 시스템 설정에 의해 결정되지만 CSS 사용자 정의에 직접적으로 영향을 받지는 않습니다.

경고 상자 기능 사용자 정의

스타일을 수정하려면 "확인" 버튼을 클릭하려면 HTML 요소를 생성하여 Alert() 기능을 복제하는 것을 고려해 보세요. 예를 들어 jQuery UI의 대화 상자 기능을 사용하면 가까운 근사치를 제공합니다.

jQuery UI 대화 상자의 예:

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#dialog").dialog();
    });
  </script>
</head>
<body>

<div>

이 예에서는 대화 상자를 만들었습니다. '맞춤형 알림'이라는 제목의 상자입니다. 이제 CSS를 사용하여 "확인" 버튼을 포함한 모양을 사용자 정의할 수 있습니다.

참고: jQuery UI 대화 상자에는 표시와 같은 경고() 기능을 구현하기 위한 추가 코드가 필요합니다. 버튼을 클릭하면 메시지가 표시되고 대화 상자가 닫힙니다.

위 내용은 Javascript 경고 상자에서 '확인' 버튼의 스타일을 어떻게 지정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.