간단한 jQuery 경고 윈도우

Question

저는 jQuery의 초보자이며 jQuery UI 패키지를 사용하지 않고 간단한 jQuery 경고 윈도우를 만들고 싶습니다. 플러그인을 몇 줄 보았지만 처음부터 다시 만들려고합니다. 버튼을 클릭하면 알리미 버튼과 취소 버튼이있는 알림 창이 나타나고 확인을 클릭하면 링크로 이동하고 창을 닫는 것과 같은 다른 액션으로 이동합니다. 누구든지 나에게 빠른 코드 예제를 보여줄 수 있다면 그것을 어떻게 할 것인지 잘 알고 도움을 주셔서 감사합니다.

그래서 나는이 같은 아마도 HTML 코드 구조를 가정

<input type = "button" value="show alert"> 

<script> 
$("input").click(function(){ 
    )}; 
</script> 

Answer 1

당신은 당신의 자신의 CSS를 작성해야하지만, 여기에 예입니다;

HTML :

<input type="button" id="redirect" value="show alert" /> 
<div id="alertWindow"> 
    You'll be redirect to google.com. Continue? 
    <br /><br /> 
    <input type="button" id="btnOk" value="OK" /> <input type="button" id="btnCancel" value="Cancel" /> 
</div> 

CSS : 마지막으로

#alertWindow { 
    display: none; 
    text-align: center; 
    border: 1px solid #333; 
    width: 200px; 
    height: 80px; 
    border-radius: 5px; 
    padding: 10px; 
} 
#btnOk, #btnCancel { width: 70px; } 

그리고 자바 스크립트 :

$(function() { 
    $("#redirect").click(function(){ 
     $('#alertWindow').show(); 
     return false; 
    }); 
    $('#btnCancel').click(function() { 
     $('#alertWindow').hide(); 
    }); 
    $('#btnOk').click(function() { 
     location.href = 'http://www.google.com'; 
     return false; 
    }); 
}); 

Here이 작업 jsFiddle

에이 코드의 복사본

Answer 2

Jque을 부여하다 대화 상자를 엽니 다. http://jqueryui.com/demos/dialog/

<input type = "button" value="show alert"> 

<script> 
$("input").click(function(){ 
     $("#myDiv").dialog({ 
      buttons: { 
       "OK": function() { 
         window.location.href = //my url 
       }, 
       "Cancel": function() { 
         this.dialog("close"); 
       } 
      }) 
      //put all your other dialog options here 
     }); 
    )}; 
</script>