Bootstrap放大模型内容

Bootstrap enlarge model content

本文关键字：大模型 放大 Bootstrap      更新时间：2023-09-26

所以我想做的是有一个按钮，将扩大下面的div内的内容，以便更容易看到一些用户。到目前为止，我有一个div，根据所选择的视图(图形或表)保存两个内容集合之一，以及上面的一组按钮，影响所述div(您想要的视图，关闭div，放大div内容或重置div内容)。我有按钮设置为模态，所以它已经有一个弹出屏幕，是响应性的，但我不知道如何去拉的内容从div和使其大于非放大版本。我找到了一个叫lightbox的插件，但它似乎只能让缩略图全屏显示。这是目前为止的代码

这是运行代码: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);

});

像这样的东西可能对您有用:

Javascript: 

$(document).ready(function () {
    $('[data-target="#enlargeElementModal"]').on('click', function(){
         $('#enlargeElementModal .modal-body')
             .html($('.content.active').html());
     });
});
CSS: 

#enlargeElementModal{
  transform:scale(1.3);
}

如果你不能使用transform:scale(n)，那么你可以简单地使用增加的font-size。

这是更新后的CodePen

$(document)内部。准备好函数你可以放下一个代码:

 $('#enlargeElementModal').on('show.bs.modal', function (event) {
 var modal = $(this);
 modal.find('.modal-title').text('New message to ');
 // this to put the content of the div with the id #1 into the modal
  modal.find('.modal-body').html($('#1').html());
});

这里有一些参考资料祝你好运http://getbootstrap.com/javascript/#modals

相关文章：