我想在客戶端點擊重置鏈接時向客戶端顯示ModalDialogbox

Question

我在做Meteor中的重置密碼系統，當客戶端點擊重置鏈接但不能完成時，我想向客戶端顯示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'); 
    } 
}); 

Answer 1

我使用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模態也是非反應性的郵件。