В данном примере будет вызываться popup окно по клику на элемент, которое содержит форму с возможностью прикрепить файл(аттач). Кнопки имеют свой уникальный стиль, при нажатии на аттач для пользователя должно быть понятно что файл подцеплен и видна часть имени, без изменения размеров кнопок.
Основная сложность была в кроссбраузерном решении стилизации кнопки input type=file.
Для красивого отображения выбранного файла сделано пару манипуляций на js. Из пути к файлу на диске убирается сначала все кроме названия файла, потом если название длинное отсекается часть названия заменяя пропущенную часть на ..
$("input:file[id=file-upload]").change(function() { str = $(this).val(); name = str.replace(/^.*(\\|\/|\:)/, ''); if(name.length > 10) { ext = name.split(".").pop().toLowerCase(); name = name.substr(0,9).toLowerCase() + '...' + ext; } $("#file-upload-value").html( name ); })Рабочий пример можно посмотреть: Demo