Replace confirm with Bootstrap modal and Backbone view

We all hate ugly confirms but now you can use a nice backbone view and bootstrap modal to bug your users and act on btn click.

Modal:

<div class="modal fade" id="confirm-modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <span id="header-text"></span><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Are You Sure?</h4>
 </div>
 <div class="modal-body">
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-ok" data-dismiss="modal">OK</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Backbone View:

App.Views.ConfirmModalClass = Backbone.View.extend({
   el: "#confirm-modal",
   events: {
    "click .btn-ok": "runCallBack"
   },
   initialize: function(args){
	   this.$el.find(".modal-body").html("<p>"+args.body+"</p>");
	   this.cb = args.cb;
   },
   render: function(){
     this.$el.modal("show");
  },
  close: function(){
     this.$el.modal("close");
  },
  runCallBack: function(){
       this.cb();
  }
});

Usage (from inside another view):

var that = this;
	   var confirmModal = new App.Views.ConfirmModalClass({
	      cb: function(){
				//use that to run functions for this view
	      },
		  body: "BODY"
	   });
	    confirmModal.render();
Advertisements
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: