SimpleModal - 回拨功能不起作用 - 点击是

我想发送自定义确认消息给SimpleModal。但点击是，它不会触发回调函数。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>

来源

2011-09-28 Vani Muttur

你不应该附加的确认对话框代码使用jQuery的页面。通过在DOM加载后附加它，插件找不到“.yes”按钮。

您的对话框应该已经在页面上并设置为“display：none”。下面的代码将使您的页面上的任何按钮“确认”生成一个确认对话框（假设您已经正确包含了所有的插件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/

来源

2011-09-28 14:04:19 Terry

SimpleModal - 回拨功能不起作用 - 点击是

回答

相关问题