Customize my modal bootstrap

Question

Customize my modal bootstrap

Navigation

#1 by (2 votes)

2

I have a modal working:

<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel"      aria-hidden="true">
<div class="modal-dialog">
    <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false"    UpdateMode="Conditional">
        <ContentTemplate>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-  hidden="true">&times;</button>
                    <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                </div>
                <div class="modal-body">
                    <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

I want to fiddle with body . I want it to have 4 buttons below the other, and put a text on the side, and everything I put there goes down one of the other, like putting something on the side? And how to put a scrollbar? Well I'm preparing the same for a list of data.

css twitter-bootstrap

asked by anonymous 16.03.2015 / 03:28

1 answer

Warning when using preg_match () Problem with encoding in Excel file reader for Java

score 2 · Answer 1

Do the following:

Use float: left to make the menu go to the left.
Make the buttons with display: block and place them inside the menu, so they will appear one underneath the other.
Create a container for the text, which will be left after the menu in HTML, and put the overflow: hidden style in this container. This will cause your text not to interact with the floated menu.
result

.menu {
  float: left;
}
.menu > button {
  display: block;
}
.conteudo {
  overflow: hidden;
  padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><script>$(function(){$('#btn').click(function(){$('#myModal').modal();});});</script><buttonid="btn">Mostrar modal</button>


<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
      <ContentTemplate>
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria- hidden="true">&times;</button>
            <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
          </div>
          <div class="modal-body">
            <div>
              <div class="menu">
                <button>Botão 1</button>
                <button>Botão 2</button>
                <button>Botão 3</button>
              </div>
              <div class="conteudo">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis neque, maximus in justo eu, dictum semper augue. Etiam viverra mollis dui facilisis iaculis. Nullam rutrum lectus eget dolor blandit accumsan. Vestibulum accumsan ligula tortor, at facilisis
                neque bibendum et.
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>