0
, так что я пытаюсь сделать, это кнопка, которая будет увеличивать содержание внутри div ниже, поэтому его легче увидеть для некоторых пользователей. На данный момент у меня есть div, который содержит один из двух наборов контента, в зависимости от выбранного вида (графика или таблицы), и группы кнопок над ним, которые влияют на упомянутый div (какой вид вы хотите, закройте div, увеличить содержимое div или сбросить содержимое div). У меня есть кнопка, настроенная как модальная, так что у нее уже есть всплывающий экран, который реагирует, но я не знаю, как потянуть контент из div и сделать его более крупным, чем не расширенная версия. Я нашел плагин с именем lightbox, но, похоже, это только для миниатюры для полноэкранного просмотра. Это мой код до сих порBootstrap enlarge содержание модели
Это работает код: http://codepen.io/MarkBond/pen/VLpXjB
HTML:
<!-- Latest compiled and 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 you sure you wish to reset the 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 a libero. Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt
condimentum vitae, gravida a libero. Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Lorem ipsum dolor sit amet, charetra varius quam sit amet
vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Lorem
ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a 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:
// Get all 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 with 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);
});
не является «float-e-margins» - это строго класс шаблонов Inspinia? – Triynko