vex modern dialog library which is highly configurable and easy to style.

https://github.com/HubSpot/vex
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cyberadz.com/dist/js/vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os'</script>
<link rel="stylesheet" href="/dist/css/vex.css" />
<link rel="stylesheet" href="/dist/css/vex-theme-os.css" />

<script>
    /*$('.demo-confirm').click(function(){
        vex.dialog.confirm({
            message: 'Are you absolutely sure you want to destroy the alien planet?',
            overlayClosesOnClick: false,
            callback: function(value) {
                $('.demo-result-confirm').show().html('<h4>Result</h4><p>' + (value ? 'Successfully destroyed the planet.' : 'Chicken.') + '</p>');
            }
        });
    });*/

    vex.dialog.buttons.YES.text = 'Join';
    vex.dialog.buttons.NO.text = 'Cancel';



    joinRoom();

    jQuery(document).ready(function( $ ){

    });

    function joinRoom() {
        vex.dialog.open({
            message: 'Join chat room',
            input: [
                '<label>Display name</label>',
                '<input type="text" name="name" autofocus/>',
                '<label>Room name</label>',
                '<input type="text" name="room"/>'
            ].join(''),
            buttons: [
                Object.assign({}, vex.dialog.buttons.YES, { text: 'Join' }),
            ],
            callback: function(data) {
                if( !data ){
                    return console.log('Cancelled');
                }

               //socket.emit('join', data, roomResponse);
            }
        });
    }

</script>