Since it's hard to find an example of how to create a readily usable modal popup using Backbone & WordPress, here's one that you can drop in your code and use right away.

base-frame-template.php

<script type="text/html" id="tmpl-my-frame">
	<div class="media-frame-title">
		<h1>My Frame</h1>
	</div>
	<div class="media-frame-content"></div>
	<div class="media-frame-toolbar">
		<div class="media-toolbar">
			<div class="media-toolbar-secondary"></div>
			<div class="media-toolbar-primary search-form">
				<button type="button" class="button button-primary media-button button-large">My Button</button>
			</div>
		</div>
	</div>
</script>

base-frame.js

BaseFrame = wp.media.view.Frame.extend({
	className: 'my-class', // A class identify your frame.
	template:  wp.template( 'my-frame' ), // This is the template name tmpl-{template-name}. See base-frame-template.php.

	events: {
		'click .media-toolbar-primary button': '_primaryClicked'
	},

	initialize: function() {
		wp.media.view.Frame.prototype.initialize.apply( this, arguments );

		_.defaults( this.options, {
			title: 'My Modal', // Default title of the modal.
			button: 'My Button', // Default submit button of the modal.
			modal: true
		});

		// Initialize modal container view.
		if ( this.options.modal ) {
			this.modal = new wp.media.view.Modal({
				controller: this
			});

			this.modal.content( this );

			this.modal.on( 'open', _.bind( function () {
				this._onOpen();
			}, this ) );

			this.modal.on( 'close', _.bind( function() {
				this._onClose();
			}, this ) );
		}
	},

	open: function( args ) {
		if ( ! args ) {
			args = {};
		}
		if ( args.content ) {
			this.modal.content( args.content( this ) );
		}
		this.successCallback = args.successCallback ? args.successCallback : null;
		this.openCallback = args.openCallback ? args.openCallback : null;
		this.closeCallback = args.closeCallback ? args.closeCallback : null;
		this.modal.open();
		this.modal.el.children[0].classList.add( 'pbs-modal-frame' );
		if ( this.className ) {
			this.modal.el.children[0].classList.add( this.className );
		}

		this.modal.el.querySelector( '.media-frame-title h1' ).textContent = args.title ? args.title : this.options.title;
		this.modal.el.querySelector( '.media-toolbar-primary button' ).textContent = args.button ? args.button : this.options.button;
	},

	close: function() {
		this.modal.close();
	},

	_primaryClicked: function() {
		this.modal.close();
		if ( this.successCallback ) {
			this.successCallback( this );
		}
		// Do stuff when the submit button is clicked.
	},

	_onOpen: function() {
		if ( this.openCallback ) {
			this.openCallback( this );
		}
		// Do stuff when modal opens.
	},

	_onClose: function() {
		if ( this.closeCallback ) {
			this.closeCallback( this );
		}
		// Do stuff when modal closes.
	}
});

gistfile1.txt

1. Enqueue backbone, wp-util and media-editor
2. Enqueue base-frame.js
3. Include base-frame-template.php in footer
4. Extend BaseFrame, or use it right away via JS:

var frame = BaseFrame();

// All arguments are optional.
frame.open({
  title: 'My Frame Title',
  button: 'My Button Label',
  successCallback: function( view ) {
    console.log( 'submit was clicked' );
  },
  openCallback: function( view ) {
    console.log( 'modal opened' );
  },
  closeCallback: function( view ) {
    console.log( 'modal closed' );
  },
  content: function() {
    return 'My content';
  };
});

style.scss

.pbs-modal-frame {
	right: auto;
	width: 1000px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	max-width: 90%;
	.media-frame-title, .media-frame-content, .media-frame-toolbar {
		left: 0;
	}
	.media-frame-content {
		top: 50px;
		padding: 16px;
		display: flex;
    	flex-direction: column;
	}

	.media-toolbar-secondary {
		width: 66%;
	    display: flex;
	    align-items: center;
	    flex-direction: row;
		p {
			line-height: 1.4em;
		    margin: 0 !important;
		}
	}
}