CODEWITHSUNDEEP
csstwitter-bootstrap
kapitan
kapitan

Reputation: 2212

Display photo outside bootstrap modal area

I've been working on a chat window that slides from the right side of the page using bootstrap modal.

Please see the jsfiddle here.

What I actually want to achieve is to display the photo like the image below. enter image description here

function chat()
{
	$('#chat-popup').modal('show');
}
.photo {
  height:100px;
  width:100px;
  float: right;
  position:absolute;
  right: 250px;
  top: 100px;
  z-index: 99999;
}



.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 300px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}

.modal.right .modal-body {
padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
right: -300px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
right: 0;
}


.modal-content {
border-radius: 0;
border: none;
}

.modal-header {
border-bottom-color: #eeeeee;
background-color: #fafafa;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<input type='button' class='btn btn-primary' value='Open Chat Window' onclick='chat()'>

<div class="modal right fade" id="chat-popup" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
          <img src='http://www.venmond.com/demo/vendroid/img/avatar/big.jpg' class='rounded-circle photo'>
          content here
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

However, I cannot seem to do it. Tried the z-index but without luck. It doesn't show if it's placed outside the modal.

Any thoughts?

Upvotes: 0

Views: 478

Answers (1)

Sumit Patel
Sumit Patel

Reputation: 4638

For that you have to play with overflow check snippet.

function chat()
{
	$('#chat-popup').modal('show');
}
.photo {
  height:100px;
  width:100px;
  float: right;
  position:absolute;
  right: 320px;
  top: 100px;
  z-index: 99999;
}

.modal-open .modal {
    overflow: visible;
}

.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 300px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
height: 100%;
}

.modal.right .modal-body {
padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
right: -300px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
right: 0;
}


.modal-content {
border-radius: 0;
border: none;
}

.modal-header {
border-bottom-color: #eeeeee;
background-color: #fafafa;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<input type='button' class='btn btn-primary' value='Open Chat Window' onclick='chat()'>

<div class="modal right fade" id="chat-popup" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
          <img src='http://www.venmond.com/demo/vendroid/img/avatar/big.jpg' class='rounded-circle photo'>
          content here
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 2

Related Questions