# Modal Mode

The modal mode is similar to popup. The difference is that popups are opened using a separate browser window while in modal mode CKFinder is opened inside a modal container that is appended to current page document.

## Multiple Modals

In some cases you may need more than one modal to handle multiple places that require selecting a file. Below you can find an example that fills each of the inputs with the URL of the selected file.

    var button1 = document.getElementById( 'ckfinder-popup-1' );
    var button2 = document.getElementById( 'ckfinder-popup-2' );

    button1.onclick = function() {
    	selectFileWithCKFinder( 'ckfinder-input-1' );
    };
    button2.onclick = function() {
    	selectFileWithCKFinder( 'ckfinder-input-2' );
    };

    function selectFileWithCKFinder( elementId ) {
    	CKFinder.modal( {
    		chooseFiles: true,
    		width: 800,
    		height: 600,
    		onInit: function( finder ) {
    			finder.on( 'files:choose', function( evt ) {
    				var file = evt.data.files.first();
    				var output = document.getElementById( elementId );
    				output.value = file.getUrl();
    			} );

    			finder.on( 'file:choose:resizedImage', function( evt ) {
    				var output = document.getElementById( elementId );
    				output.value = evt.data.resizedUrl;
    			} );
    		}
    	} );
    }