how can i adjust height and width of the layer on the card and one thing i want only the close button should work and everything will be unclickable. please can any one help me to find the solution...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="">
<div class="modal-content" >
<div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">
</div>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-wrap" style="width: 6rem;">
<p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The close button 'x' dont work? why?
Change z-index of modal-content child div to 0 and add some height and width to it
<div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;width:100%;height:100%;">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="">
<div class="modal-content" >
<div class="" style="padding: 44% 50%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;width:100%;height:100%;">
</div>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-wrap" style="width: 6rem;">
<p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
</div>
<div class="modal-footer" style="z-index:1;">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
If you don't want the overlay in modal background remove opacity and padding
<div class="" style="position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="">
<div class="modal-content" >
<div class="" style="position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 0;">
</div>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-wrap" style="width: 6rem;">
<p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Is this what you wanted ? The modal only closes if you click on X at the top.
To disable modal via keyboard esc or clicking outside the modal we need to add this to our modal div
data-keyboard="false" data-backdrop="static"
Using overlay
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document" style="">
<div class="modal-content">
<div class="" style="height: calc(100% - 70px);width:100%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">
</div>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 1;">
<span aria-hidden="true" >×</span>
</button>
</div>
<div class="modal-body text-wrap" style="width: 6rem;">
<p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
No Overlay
If you do not want any overlay then you can use this code.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document" style="">
<div class="modal-content">
<div class="" style="width:100%;opacity: 60%;position: absolute;background-color: rgba(0,0,0,0.7);align-items: center;z-index: 1;">
</div>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 1;">
<span aria-hidden="true" >×</span>
</button>
</div>
<div class="modal-body text-wrap" style="width: 6rem;">
<p class="text-break">sdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsdsdfsfsdfsdfsdfsd</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Related
I have 3 columns in my design and I want a modal to be placed inside the second column. And the modal shouldn't move outside the 2nd column when the screen size is changed (only on desktop sizes (1922x1080 - 1280x600) ).
.col{
height:100vh;
}
.column-two{
position:relative;
}
.modal-content {
width: 200px !important; height: 228px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous" />
<div class="row align-items-start">
<div class="col border">
ONE
</div>
<div class="col border column-two">
TWO
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col border" >
THREE
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
I'm planning to make the modal position relative and place it inside the column.
Please add below custom css and check agian. i hope your issue will fix by this custom css.
.column-two .modal {
position: absolute;
}
/* for center position */
.column-two .modal.show {
display: flex !important;
}
This would be my solution:
.col{
height:100vh;
}
.column-two{
position:relative;
}
#exampleModal{
position: relative;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous" />
<div class="row align-items-start">
<div class="col border">
ONE
</div>
<div class="col border column-two">
TWO
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="col border" >
THREE
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
I have a bootstrap dialog that is being displayed in google maps:
I want to be able to show the dialog at the center of the map as opposed to the top and increase the width and height of it. So far the styling for width is the only thing that appears to take effect. Here is my code:
HTML, CSS and JS:
$('#myModal').modal('show');
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
<div class="modal-dialog " style="width: 30%" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Title</h4>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Here's a centered Bootstrap 5 Modal!
You have to add the class "modal-dialog-centered" to the "modal-dialog" class.
Here's a picture to make everything a bit more understandable:
Here's the code:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This modal is centered horizontally and vertically!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have a problem, when I added a bootstrap modal, it shows correctly, but it always goes behind sticky menu.
I tried with vertical central alignment but still it goes up?
Here is the image:
Modal is openning when I click a button Send Inquiry1
here is the html code on this link
Below is the code for aligning bootstrap modal in center.
In your code modal-dialog modal-dialog-centered these classes are missing. Instead it is default modal which appears on the top.
Also reduce z-index of sticky.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Try the following code by replacing your modal div
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
SCREENSHOT HEREI need a modal on my website and i decided to litterally copy the code for a modal on the bootstrap website. Only now it displays very small.
This is the modal code:
<!-- Modal (EXACT COPY FROM BOOTSTRAP) -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
if you want a Bootstrap v4 modal for your site they're quite self explanatory. But for example sake and to hopefully help you. The code below will work for a Bootstrap modal pop-up (large):
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Large Modal</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
I have made a modal with the following code:
The modal works fine, but the problem is that it changes the layout of the topbar and header position when I go to the page where the modal is placed. On the other pages the topbar and header are still like they should be.
What is the problem?
Thanks
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-default btn-xs" >Size chart</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="http://vmatechs.com/wp-content/uploads/2013/07/android.jpg" alt="image" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>