javascript - Bootstrap enlarge model content -
so i'm trying have button enlarge content inside of div below easier see users. of right have div holds 1 of 2 collections of content depending on view selected (graph or table), , group of buttons above effect said div (which view want, close div, enlarge div content, or reset div content). have button set modal has pop screen responsive don't know how go pulling content div , making larger non-enlarged version. found plugin called lightbox seems thumbnail fullscreen. code far
this running code: http://codepen.io/markbond/pen/vlpxjb
html:
<!-- latest compiled , minified css --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- latest compiled javascript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>elements map </h5> <div class="ibox-tools"> <div class="dropdown dropdownview"> <button class="btn btn-default dropdown-toggle btn-xs btn-purple" type="button" id="dropdownmenuelement" data-toggle="dropdown" aria-expanded="true"> views <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenuelement"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#1">map</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#2">list</a></li> </ul> </div> <button type="button" class="btn btn-green btn-xs" data-toggle="modal" data-target="#resetelementmodal">reset all</button> <div class="modal fade" id="resetelementmodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> </button> <h4 class="modal-title">element map</h4> </div> <div class="modal-body"> <p>are sure wish reset elements?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#enlargeelementmodal"> <span class="glyphicon glyphicon-fullscreen"></span> </button> <div class="modal fade" id="enlargeelementmodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> </button> <h4 class="modal-title">element map</h4> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> </div> </div> <div class="ibox-content"> <div class="active content" id="1"> lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. quisque mauris augue, molestie tincidunt condimentum vitae, gravida libero. </div> <div class="content" id="2"> secondo sed ac orci quis tortor imperdiet venenatis. duis elementum auctor accumsan. aliquam in felis sit amet augue. secondo sed ac orci quis tortor imperdiet venenatis. duis elementum auctor accumsan. aliquam in felis sit amet augue. secondo sed ac orci quis tortor imperdiet venenatis. duis elementum auctor accumsan. aliquam in felis sit amet augue. secondo sed ac orci quis tortor imperdiet venenatis. duis elementum auctor accumsan. aliquam in felis sit amet augue. secondo sed ac orci quis tortor imperdiet venenatis. duis elementum auctor accumsan. aliquam in felis sit amet augue. </div> </div> </div> </div> </div> css:
.btn-green { background-color: #70db70; color: #ffffff; } .btn-green:hover { background-color: #33cc33; color: #ffffff; } .btn-blue { background-color: #6c6cff; color: #ffffff; } .btn-blue:hover { background-color: #3333ff; color: #ffffff; } .btn-purple { background-color: #e57eff; color: #ffffff; } .btn-purple:hover { background-color: #a55ab8; color: #ffffff; } .nav-dropdown-style { font-weight: 600; padding: 4px 12px; margin: 14px 5px 5px 20px; font-size: 14px; float: right; background: #1ab394; } .nav-dropdown-style:hover { background: #199d82; } .ibox-content > div { display: none; } .ibox-content > div.active { display: block; } .dropdownview { float: left; margin-right: 3px; } javascript:
// list options var listoptions = $('ul.dropdown-menu > li > a'); // attach "click" event listoptions.click(function (ev) { var href = $(this).attr('href'); var divtoshow = $(href); // find divs content var contentdivs = divtoshow.parent().find('.content'); // toggle "active" classes contentdivs.removeclass('active'); divtoshow.addclass('active'); }); $(document).ready(function () { $("span.pie").peity("pie", { fill: ['#1ab394', '#d7d7d7', '#ffffff'] }) var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]]; var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]]; var data1 = [ { label: "data 1", data: d1, color: '#17a084' }, { label: "data 2", data: d2, color: '#127e68' } ]; $.plot($("#flot-chart1"), data1, { xaxis: { tickdecimals: 0 }, series: { lines: { show: true, fill: true, fillcolor: { colors: [{ opacity: 1 }, { opacity: 1 }] }, }, points: { width: 0.1, show: false }, }, grid: { show: false, borderwidth: 0 }, legend: { show: false, } }); var linedata = { labels: ["january", "february", "march", "april", "may", "june", "july"], datasets: [ { label: "example dataset", fillcolor: "rgba(220,220,220,0.5)", strokecolor: "rgba(220,220,220,1)", pointcolor: "rgba(220,220,220,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(220,220,220,1)", data: [65, 59, 40, 51, 36, 25, 40] }, { label: "example dataset", fillcolor: "rgba(26,179,148,0.5)", strokecolor: "rgba(26,179,148,0.7)", pointcolor: "rgba(26,179,148,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(26,179,148,1)", data: [48, 48, 60, 39, 56, 37, 30] } ] }; var lineoptions = { scaleshowgridlines: true, scalegridlinecolor: "rgba(0,0,0,.05)", scalegridlinewidth: 1, beziercurve: true, beziercurvetension: 0.4, pointdot: true, pointdotradius: 4, pointdotstrokewidth: 1, pointhitdetectionradius: 20, datasetstroke: true, datasetstrokewidth: 2, datasetfill: true, responsive: true, }; var ctx = document.getelementbyid("linechart").getcontext("2d"); var mynewchart = new chart(ctx).line(linedata, lineoptions); });
something might work you:
javascript:
$(document).ready(function () { $('[data-target="#enlargeelementmodal"]').on('click', function(){ $('#enlargeelementmodal .modal-body') .html($('.content.active').html()); }); }); css:
#enlargeelementmodal{ transform:scale(1.3); } if can't use transform:scale(n) use increased font-size.
here updated codepen
Comments
Post a Comment