2011-09-28 2 views
0

SimpleModal에 맞춤 확인 메시지를 보내고 싶습니다. 그러나 Yes를 클릭하면 해당 콜백 트리거가 발생하지 않습니다.SimpleModal - 콜백 기능이 작동하지 않습니다. - 예를 클릭하십시오.

닫기 버튼을 클릭하면 간단한 모달 확인 상자를 실행하고 싶습니다. 나는이 기능을 원했던 곳이 많다. 그래서 dint는 div 태그 안에 메시지를 하드 코딩하려고했습니다. 아래 코드를 참조하여 내가 어떻게이 작업을 수행 할 수 있는지 알려주십시오. 미리 감사드립니다. 아래

jQuery(function($) { 




     $('#btn').click(function(e) { 

      e.preventDefault(); 

      // example of calling the confirm function 
      // you must use a callback function to perform the "yes" action 
      confirm("", function() { 

       window.location.href = 'http://www.google.com/'; 
      }); 


     }); 



    }); 

    function confirm(message, callback) { 

     // alert("1"); 
     $('body').append('<div id="container"><div id="confirm" style="display:none"><div class="header"><span>Confirm</span></div><div class="message">' + message + '</div><div class="buttons"><div class="no simplemodal-close">No</div><div class="yes">Yes</div></div></div><div style="display: none"><img src="skin/img/header.gif" alt="" /><img src="skin/img/button.gif" alt=""/></div></div>'); 
     $('#confirm').modal({ 
      closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>", 
      resizable: false, 
      position: ["20%", ], 
      overlayId: 'confirm-overlay', 
      containerId: 'confirm-container', 
      onButtonClick: function(dialog) { 
       var modal = this; 

       // if the user clicks "yes" 
       $('.yes', dialog.data[0]).click(function() { 

        // call the callback 
            if ($.isFunction(callback)) { 

             callback.apply(); 
            } 
        // close the dialog 


        modal.close(); // or $.modal.close(); 
       }); 
      } 
     }); 
    } 

HTML 코드 :

<!DOCTYPE html> 
<html> 
<head> 
    <title> Confirm Modal Dialog </title> 


    <!-- Confirm CSS files --> 
    <link type='text/css' href='skin/confirm.css' rel='stylesheet' media='screen' /> 
    <!-- JS files are loaded at the bottom of the page --> 
</head> 
<body> 
<input id="btn" type='button' name='confirm' value='Close' onclick="return confirm('Are you sure?');" /> 

    <script type='text/javascript' src='jquery/jquery.js'></script> 

    <script type='text/javascript' src='jquery/jquery.simplemodal.js'></script> 

    <script type='text/javascript' src='jquery/confirm.js'></script> 



</body> 
</html> 

답변

1

당신은 jQuery로 페이지에 확인 대화 상자 코드를 추가 할 수 없습니다. DOM을로드 한 후에 추가 기능을 추가하면 플러그인에서 '.yes'버튼을 찾을 수 없습니다.

귀하의 대화 상자는 이미 페이지에 있고 "display : none"으로 설정되어 있어야합니다. 다음 코드는 페이지에서 "confirm"클래스가있는 모든 버튼을 확인 대화 상자를 만듭니다 (모든 플러그인 JS 파일을 올바르게 포함했다고 가정).

CSS :

#confirm {display:none;} 

HTML :

<input type='button' class='confirm' value='Click to Confirm'/> 

<!-- modal content --> 
<div id='confirm'> 
    <div class='header'><span>Confirm</span></div> 
    <div class='message'></div> 
    <div class='buttons'> 
     <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div> 
    </div> 
</div> 

JS : 여기

$('.confirm').click(function (e) { 
    e.preventDefault(); 

    confirm("Confirm yes or no", function() { 
     alert('yes clicked'); 
    }); 
}); 

근무 예 : http://jsfiddle.net/YzRpP/2/

관련 문제