"Send mail"
Bootstrap 3.3.0 Snippet by MohamedSamiKhiari

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <script src="https://rawgithub.com/mindmup/bootstrap-wysiwyg/master/external/jquery.hotkeys.js"></script> <script type="text/javascript" src="https://rawgithub.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js"></script> <script type="text/javascript" src="https://rawgit.com/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script> <script type="text/javascript" src="http://twitter.github.io/typeahead.js/js/handlebars.js"></script> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="launch"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Send som mail</h4> </div> <div class="modal-body"> <div> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-3" class="control-label">Modtagere:</label> <div class="col-md-9"> <div class="to-dropdown"> <span class="label label-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> to: <span class="caret"></span> </span> <ul class="dropdown-menu" role="menu"> <li><a href="#">cc:</a></li> <li><a href="#">bcc:</a></li> </ul> </div> <input id="mailadr" name="mailadr" class="typeahead form-control" type="text" placeholder="mail-adresse" data-provide="typeahead"/> <div class="modtagere"> <div class="to"> <div class="to-dropdown"> <span class="label label-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> to: <span class="caret"></span> </span> <ul class="dropdown-menu" role="menu"> <li><a href="#">cc:</a></li> <li><a href="#">bcc:</a></li> </ul> </div>Beta Cykler <beta@cykler.dk> <span class="pull-right icon-remove-sign"></span></div> <div class="to"> <div class="to-dropdown"> <span class="label label-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> bcc: <span class="caret"></span> </span> <ul class="dropdown-menu" role="menu"> <li><a href="#">to:</a></li> <li><a href="#">cc:</a></li> </ul> </div>Rasmus Lock Fuglsang <rlf@logiva.dk> <span class="pull-right icon-remove-sign"></span></div> </div> </div> </div> <div class="form-group"> <label class="col-md-3" class="control-label">Emne:</label> <div class="col-md-9"> <input class="typeahead form-control" type="text" placeholder="Emne" data-provide="typeahead" value="Spørgsmål vedr. faktura 55123 på 6.789,-"/> </div> </div> <div class="form-group"> <label class="col-md-3" class="control-label">Besked:</label> <div class="col-md-9"> <div class=""> <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> <div class="btn-group"> <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a> <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a> <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a> </div> <div class="btn-group"> <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a> <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a> </div> </div> <div id="editor">Hej mr. X<br/> Der lader til at være udfordringer ... <br/><b><u>Fakturaer:</u></b> <p></p><table> <thead> <tr><th>Leverandør</th><th>Beløb</th><th>Ansvarlig</th><th>Link</th></tr> </thead> <tbody> <tr><td>Beta Cykler</td><td>6.789,-</td><td>SVS</td><td><a href="#">Detaljer</a></td></tr> </tbody> </table> </div> </div> </div> </div> <div class="form-group"> <label class="col-md-3" class="control-label">Dokumenter:</label> <div class="col-md-9"> <div class="row"> <div class="col-sm-6"> <div class="checkbox"> <input type="checkbox" name="att" value="Original01.pdf" checked> Original01.pdf</input> </div> </div> <div class="col-sm-6"> <div class="checkbox"> <input type="checkbox" name="att" value="regnskab.xls"> regnskab.xls</input> </div> </div> <div class="col-sm-6"> <div class="checkbox"> <input type="checkbox" name="att" value="faktura02.tif"> introduction.docx</input> </div> </div> </div> </div> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Annuller</button> <button type="button" class="btn btn-primary">Send</button> </div> </div> </div> </div> <script> $(function(){ $('#editor').wysiwyg(); $('#launch').click(); }); </script>
#editor { overflow:scroll; max-height:300px; height: 15em; border: 1px solid #ccc; border-radius: 4px; } #editor table { width: 100% } #editor table tr th { font-size: 80%; padding: 0.5em; font-align: center; } #editor table tr td { padding: 0.3em; } form .row { border: 1px solid #ccc; border-radius: 4px; margin-left: 0px; margin-right: 0px; } div.checkbox { margin-left: 12px; padding-top: 6px; padding-bottom: 6px; } .twitter-typeahead { width: 100%; } .to { padding: 4px; position: relative; } .to .icon-remove-sign { color: #ccc; cursor: pointer; } .to-dropdown { display: float; position: absolute; left: -1.9em; top: 0.4em; width: 4em; } .to .to-dropdown { left: -4.2em; } .to .to-dropdown > span { float: right; } .tt-dropdown-menu { background: white; border-radius: 4px; padding: 12px; margin: 1px; border: solid 1px rgb(102, 175, 233); outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6); }
$(document).on('click', '.to .icon-remove-sign', function() { $(this).parent().remove(); }) function addMail(val) { if (val) { var to = $('<div class="to"><span class="addr"></span><span class="pull-right icon-remove-sign"></span></div>'); to.find('.addr').text(val); $('.modtagere').append(to); } } $('#mailadr').keydown(function(e) { if (e.keyCode == 13) { var val = $('#mailadr').val(); addMail(val); } }); var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substrRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { // the typeahead jQuery plugin expects suggestions to a // JavaScript object, refer to typeahead docs for more info var div = $('<div></div>'); div.text(str); matches.push({ display: div.text(), value: str}); } }); cb(matches); }; }; var data = [ 'Rasmus Fuglsang <rlf@logiva.dk>', 'Stark Århus <aarhus@stark.dk>', 'Jens Wulf <jeww@logiva.dk>', 'mtm@logiva.dk', 'Beta Cykler <beta@cykler.dk>', 'Stark Kbh <kbh@stark.dk>', 'Marianne Hünesen <mh@logiva.dk>' ]; $('#mailadr').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'mails', displayKey: "value", source: substringMatcher(data), templates: { empty: '<i>Ingen adresser matcher</i>', suggestion: Handlebars.compile('<p>{{display}}</p>') } }); $('#mailadr').on('typeahead:selected', function(e,item) { addMail(item.value); return item; });

Related: See More


Questions / Comments: