我想在客户端点击resetlink时向客户端显示ModalDialogbox

时间:2015-07-28 10:12:10

标签: javascript meteor

我正在Meteor中执行resetpassword系统,我想在客户端点击重置链接时向客户端显示ModalDialogbox但是无法执行此操作。

  
    

account.html

  
     

这是我的ResetPasswordform和Modal

<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');
    }
});

1 个答案:

答案 0 :(得分:-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模式对非响应消息也很有用。