Customize my modal bootstrap

Asked

Viewed 3,237 times

2

I got a working modal:

<!-- 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 touch the body. I want it to have four buttons underneath the other, and put a text next to it, and everything I put there goes down to each other, like putting something on the side? And how to put a scroll bar? Because I am preparing the same for a data list.

css twitter-bootstrap

  • This aria- hidden="true" is purposeful with these two spaces in the middle?

  • actually this is just a property of the button, no matter the component, if I put a label, or Asp.net button always goes down on each other, I want to know how to put one on the side.

  • Just use display:inline-block on those internal buttons.

  • put that where?

  • @Renan how I do??

  • @Warlock tried to use the classes, col-Sm, col-lg, col-Xs? EX: <div class="col-sm-6">Conteúdo Um</div><div class="col-sm-6">Conteúdo ao lado</div>

Show 1 more comment

1 answer

2

Do the following:

  • Utilize float: left to make the menu go left.
  • Make the buttons stick display: block and put them inside the menu, so they will appear under each other.

  • Create a container for the text, which will stay after the menu in HTML, and put in this container the style overflow: hidden. This will cause your text to not interact with the floated menu.

  • outworking

    Resultado

.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>
<!-- Latest compiled and minified CSS -->
<link rel="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>
<button id="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>

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.