我想在客户端点击重置链接时向客户端显示ModalDialogbox

问题描述：

我在做Meteor中的重置密码系统，当客户端点击重置链接但不能完成时，我想向客户端显示ModalDialogbox。我想在客户端点击重置链接时向客户端显示ModalDialogbox

account.html

这是我ResetPasswordform和模态

<template name="ResetPassword"> 
    {{#if resetPassword}} 
    <div class="modal fade" id="myModal-9" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <span class="f-s-20 text-blue">ŞİFRE DEĞİŞTİRME EKRANI </span> 
       </div> 
       <div class="modal-body"> 
        <form action="/reset-password" id="resetPasswordForm" method="post"> 
         <div class="form-group"> 
          <input id="resetPasswordPassword" type="password" name="newpassword" class="form-control width-250 m-auto" placeholder="Yeni Şifrenizi Girin"> 
         </div> 
         <div class="form-group"> 
          <input id="resetPasswordPasswordConfirm" type="password" name="newpasswordconfirm" class="form-control width-250 m-auto" placeholder="Yeni şifre tekrarla"> 
         </div> 
         <div class="form-group"> 
          <button type="button" id="resetpasswordbtn" class="btn btn-theme width-250" value="Reset">Yenile</button> 
         </div> 
        </form> 
       </div> 
      </div> 

     </div> 
    </div> 
    {{/if}} 

</template>

account.js

if (Accounts._resetPasswordToken) { 
    Session.set('resetPassword', Accounts._resetPasswordToken); 
} 
Accounts.onResetPasswordLink(function (token, done) { 
    Session.set('resetPassword', token); meteo 
    done(); // Assigning to variable 

    $t.find('#myModal-9').modal('show'); 

}); 

Template.ResetPassword.helpers({ 
    resetPassword: function() { 
     return Session.get('resetPassword'); 
    } 
});

答

我使用bootbox在Meteor中使用Meteor模板显示引导样式模态（以便模态反应）。如果您

meteor add mizzao:bootboxjs

那么下面的功能就足以显示一个模式：

function displayModal(template, data, options) { 
    // minimum options to get message to show 
    options = options || { message: " " }; 
    var dialog = bootbox.dialog(options); 

    // Take out the default body that bootbox rendered 
    dialog.find(".bootbox-body").remove(); 

    // Insert a Meteor template 
    // Since bootbox/bootstrap uses jQuery, this should clean up itself upon removal 
    Blaze.renderWithData(template, data, dialog.find(".modal-body")[0]); 
    return dialog; 
}

你会发现默认bootbox模态也是非反应性的邮件。

我想在客户端点击重置链接时向客户端显示ModalDialogbox

相关推荐