Creating a Modal using Backbone.js

I am new to Backbone, and although I did some research, I could not find a solution that would work for me, in terms of creating a Modal. I want to create a base Modal class, and then reuse/extend it and apply different templates, within my other view/classes.

Here is my Modal base class:

define([
  // Application.
  'app',
  'backbone',
  'plugins/jquery-ui.custom',
  'moment'
], function(App, Backbone) {
  // Create a new module.
  var Modal = App.module();

  Modal.View = Backbone.View.extend({
      className: 'ui-modal',

  render: function () {
      console.log('this.$el',this.$el,'this.template',this.template);
        this.$el.html(this.template());
        this.$el.delegate('.close', 'click', this.closeModal);
        this.error = this.$el.find('.error');
        return this;
      },

  closeModal: function (ev) {
        if (ev) ev.preventDefault();
        this.$el.unbind();
        this.$el.empty();
        this.$el.remove();
      },

  initialize: function () {
      console.log('initialize modal view', 'this.$el', this.$el);
        _.bindAll(this, 'render', 'closeModal');
        return Backbone.View.prototype.initialize.call(this);
    }
  });

I am trying to extend/utilize the Modal class here:

ProductDetails.Views.testView = Modal.View.extend({
    template: 'modals/ProductDetails/testView',
    render: function() {
      Modal.View.prototype.render.call(this);
      this.delegateEvents();
      return this;
    },
    initialize: function() {
      console.log('initialize testView','this.$el',this.$el);
      return Modal.View.prototype.initialize.call(this);
    }
  });

I am then trying to trigger the Modal here:

ProductDetails.Views.Description = Backbone.View.extend({
    template: 'partials/product/description',
    initialize: function(){
      _.bindAll(this, 'serialize', 'warn', 'error', 'updateModel', 'testModalView');

      //instantiate the test modal
      this.testView = new ProductDetails.Views.testView();

      this.testView.$el = this.$el;
    },
    serialize: function(){
     //some stuff
    },
    events: {
      'click .testModalView_link': 'testModalView'
       //some other stuff
    },
    warn: function() {
      //some stuff
    },
    error: function(error){
      //some stuff
    },
    updateModel: function(e){
      //some stuff
    },
    testModalView: function(ev) {
      try {
        ev.preventDefault();
        $('.ui-modal').append(this.testView.render())
      } catch(e) {
        console.log(e.message,e);
      }
    }
  });

I have doublechecked, but I may have made a mistake while attempting to simplify the code for inclusion within this question. When I test my modal by clicking the link (with class .testModalView_link), I get the error: "TypeError: this.$el is undefined", and it points to the modal base class, to this line:

this.$el.html(this.template());

Can anyone help me make this work, or at least understand what I am doing wrong?

Thanks.