"From selectable list to modal"
Bootstrap 3.3.0 Snippet by mnolae

<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 ----------> <div class="container"> <div class="row col-list"> <div class="col-md-4 t1"> <div class="col-head text-center"> <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> <h2>Col List #1</h2> </div> <ul class="list-unstyled"> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #1 #1</p> </li> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #1 #2</p> </li> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #1 #3</p> </li> </ul> </div> <div class="col-md-4 t2"> <div class="col-head text-center"> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <h2>Col List #2</h2> </div> <ul class="list-unstyled"> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #2 #1</p> </li> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #2 #2</p> </li> </ul> </div> <div class="col-md-4 t3"> <div class="col-head text-center"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> <h2>Col List #3</h2> </div> <ul class="list-unstyled"> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #1</p> </li> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #2</p> </li> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #3</p> </li> <li> <p class="option"><span class="glyphicon glyphicon-ok inactive" aria-hidden="true"></span>Option #3 #4</p> </li> </ul> </div> </div> <hr /> <div class="text-right"> <spam class="pull-left">See a sample in <a href="http://uym.es/solicita-presupuesto" target="_blank">uym.es</a></spam> <!-- Button trigger modal --> <button type="button" id="btn-reset" class="btn btn-default btn-lg"> Reset </button> <!-- Button trigger modal --> <button type="button" id="btn-modal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Go to Form </button> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <!--textarea id="textarea-list" class="col-md-12"></textarea--> <ul id="summary-list"> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans'; } .container{ margin-top: 42px;} .inactive { visibility: hidden; } .active { background-color: #F7F7F9; } .col-list .col-head { color: white; border-bottom: thick solid rgba(0, 0, 0, 0.2); border-radius: 5px 5px 0 0; margin-top: 45px; } .col-list .col-head span { color: white; font-size: 3em; padding: 15px; border: thick solid white; border-radius: 50%; margin-top: -45px; background-color: #BE1E2D; } .col-list .col-head h2 { margin-top: 7px; margin-bottom: 5px; font-size: 2em; font-weight: 700; } .col-list .t1 .col-head { background-color: #FFB748; } .col-list .t2 .col-head { background-color: #16CAC8; } .col-list .t3 .col-head { background-color: #F87152; } .col-list .t1 li { border-bottom: 1px solid rgba(255, 183, 72, .4); } .col-list .t2 li { border-bottom: 1px solid rgba(22, 202, 200, .4); } .col-list .t3 li { border-bottom: 1px solid rgba(248, 113, 82, .4) } .col-list .t1 li:last-child, .col-list .t2 li:last-child, .col-list .t3 li:last-child { border-bottom: 0; } .col-list li p { cursor: pointer; font-size: 1.2em; padding: 7px; margin: 0; } .col-list li:hover { background-color: #F7F7F9; } .option span { color: rgba(162, 213, 0, 1); margin-left: 7px; margin-right: 7px;}
$(".option").click(function(){ $( this ).find( 'span' ).toggleClass( 'inactive' ); $( this ).toggleClass('active'); }); $( "#btn-modal" ).click(function(){ $( "#summary-list" ).empty(); $( ".option" ).each(function() { if( ! $( this ).children().hasClass( 'inactive' )) $( "#summary-list" ).append( "<li>" + $( this ).text() + "</li>" ); }); if( $( "#summary-list" ).children().length == 0 ) $( "#summary-list" ).append( "<li>No options selected</li>" ); }); $( "#btn-reset" ).click( function(){ $( ".option" ).each( function(){ $( this ).children().addClass( 'inactive' ); $( this ).removeClass( 'active' ); }); });

Related: See More


Questions / Comments: