경고 대화 상자 사용자 지정 - 확인 단추가 응답하지 않습니다.

Question

사용자 지정 경고 대화 상자를 만들고 상자 스타일이 올바르지 만 삽입 한 Ok 단추가 응답하지 않습니다. 아래는 참조 할 코드입니다.

function CustomAlert(){ 
    this.render = function(dialog){ 
     ... 
     ... 
     document.getElementById('dialogboxfoot').innerHTML = "<button onclick = 'Alert.ok()'>OK</button>"; 
    } 

    this.ok = function(){ 
     document.getElementById('dialogbox').style.display = "none"; 
     document.getElementById('dialogoverlay').style.display = "none"; 
    } 
    } 

    var Alert = new CustomAlert(); 

    $('#button1').click(function(){ 
    Alert.render("Heyooo!!!"); 
    }) 

Alert.render 함수가 올바르게 실행됩니다. (innerHTML 함수로 삽입 된) Alert.ok 함수를 트리거하려고하면 "Uncaught ReferenceError : Alert is not defined"라는 DOCTYPE 선언 인 index.html 파일의 라인 1을 참조합니다.

이 컨텍스트에서 호출 할 때 "경고"가 정의되지 않은 이유는 무엇입니까?

Answer 1

귀하의 질문은 다소 모호합니다. JavaScript alert() 메서드는 스타일을 지정할 수 없으므로 사용자 자신의 모달을 만들어야합니다. 나는이 (매우 반응)과 같은 하나를 사용 : 이것이 당신이 찾고있는 무엇을하지 않으면

function styledAlert(message){ 
 
    
 
    document.getElementById('alertText').innerHTML = message; 
 
    document.getElementById('alertWrapper').style.display = 'block'; 
 
    
 
    
 
    }

#alertWrapper { 
 
    position: absolute; 
 
    display: none; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    } 
 

 
#alertBox { 
 
    position: fixed; 
 
    top: 25%; 
 
    bottom: 25%; 
 
    right: 25%; 
 
    left: 25%; 
 
    background: rgba(0,0,0,0.7); 
 
    border-radius: 25px; 
 
    } 
 

 
#alertAccept { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    right: 15px; 
 
    } 
 

 
#alertText { 
 
    margin: 15px; 
 
    color: white; 
 
    }

<div id="alertWrapper"><div id="alertBox"><p id="alertText"></p><button id="alertAccept" onclick="document.getElementById('alertWrapper').style.display = 'none'">OK</button></div></div> 
 

 
Type in an alert message: <input type="text" onblur="styledAlert(this.value)"/> And then blur the textbox to see the alert . . .

은, 귀하의 질문에 당신이 추구하는 최종 결과에 대한 좀 더 구체적인 확인하시기 바랍니다.