Exploring the capabilities of Bootstrap v4.0.0-alpha has been an exciting experience, but I have a specific requirement in mind: I want to place a modal box inside a container div instead of it covering the entire screen. https://i.sstatic.net/xyZ8X.jpg
I've attempted tweaking some pre-existing CSS classes and utilized JavaScript, such as:
z-index: 1051;
I made changes in the right navbar, but I'm not completely satisfied with it. Is there a simpler solution available?
Begin by creating a variable called mod and store the modal in it;
var mod = $('.modal');
Next, insert a div
<div class="insidemodal"></div>Utilize the Bootstrap 4 modal event listener, specifically show.bs.modal, and place var mod = $('.modal'); within it. Load the modal into the insidemodal selector when the modal is about to be displayed.
$('#myModal').on('show.bs.modal', function () {
var mod = $('.modal'); //Create variable and load modal in it
$('.insidemodal').html(mod); //Load modal to `insidemodal` Selector
});
Implement the following CSS changes in the Modal
.modal-backdrop {
display: none //<---Disabling the modal backdrop
}
.modal-backdrop.in {
opacity: 0;
}
.modal {
z-index: inherit !important; //<--Overwrite default modal z-index: 1050
position: relative; //<Change position from absolute
}
The final code will look like this
JS
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function () {
var mod = $('.modal');
$('.insidemodal').html(mod);
});
});
CSS
.title {
background: green;
color: #fff;
padding: 5px;
text-align: center;
border: 1px solid;
}
.menu {
background: blue;
color: #fff;
padding: 5px;
text-align: center;
border: 1px solid;
}
.insidemodal {
background: red;
border: 1px solid;
padding: 5px;
}
.modal-backdrop {
display: none;
}
.modal-backdrop.in {
opacity: 0;
}
.modal {
z-index: inherit !important;
position: relative;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="title">This Is Title</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="menu">Left Menu
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>
</div>
</div>
<div class="col-sm-8">
<div class="insidemodal"></div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Access the Working Fiddle Example Here
Note: If there are multiple modals, making the above CSS changes directly in the Modal CSS could affect other modals' behavior. Therefore, it's advisable to use a custom selector instead of altering the default modal selector.
Looking for help with my HTML code. Here's the setup: <mat-card> <mat-card-content> <code>{{file}}</code> </mat-card-content> </mat-card> But when the mat-card element is rendered, it's not ra ...
I am working with a Geometry that has vertices forming a polyline. However, the offset I have created is not accurate. Currently, I am calculating the center of the geometry and then offsetting a value relative to this center. This method is resulting in a ...
Below is my front end Jquery script: //Json String JSON.stringify({ Id: CurrentID, CustomerId: $.trim($("#CustomerList").val()), StoreId: $.trim($("#StoreList").val()), ProductId: $.trim($("#ProductList").val()), Date: $.trim($("txtDa ...
Let me walk you through what I'm attempting to achieve. The goal is to upload a file on the form and send the data via ajax. This is the code snippet I have implemented: <form enctype="multipart/form-data" name="addcert_form" id="addcert_for ...
Currently, I am experimenting with using node-xmlhttprequest. Here is an example of what I have been working on: // f.js (function() XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest xhr = new XMLHttpRequest() xhr.open('GET ...
Looking for a code solution to implement a real-time countdown feature, similar to deal expiration timers on shopping websites. I have an expiry time stored in MySQL which needs to be displayed whenever the page is accessed. Additionally, it should calcul ...
I'm trying to implement a call to a web method in an ASP.NET C# application using the code below Jquery: jQuery.ajax({ url: 'AddToCart.aspx/AddTo_Cart', type: "POST", data: "{'quantity' : " + total_qty + ",'itemI ...
I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...
I'm trying to access a Public Quote JSON API and display the data on my HTML page. Even though I have some knowledge of JQuery Ajax method, my code seems to be facing issues in pulling the data into HTML. I'm looking for an explanation on what mi ...
My database has verified data that is being updated, however, the DOM is not reflecting these updates. <ul> <li ng-repeat="aReview in reviewList"> .... .... </li> </ul> <script> if(globalMethods.stringVa ...
I am facing an issue with my html form validation. While all data is successfully validated except the checkbox value, it does not seem to validate with jquery/ajax request. Here is a snippet of my code for the terms section: <tr> <td>Terms & ...
While Bootstrap cards typically display content in a linear arrangement, I am wondering how to add an element that extends beyond the boundaries of the card. Here is an illustration of the effect I am trying to achieve: https://i.sstatic.net/R0HRd.png I ...
In order to perform statistical calculations like Averages (Mean, Median, Mode) on data extracted from Datatables, I need the automatic calculation to remain accurate even when the table is filtered. While I have managed to obtain the desired values, extra ...
Encountering an issue while attempting to switch the sequelize-cli configuration to dynamic configuration, following the instructions in the documentation. I have created the .sequelizerc-file in the project's root directory and set up the path to con ...
Issue with Bootstrap-JavaScript Autofocus Attribute Upon page load, the autofocus attribute fails to trigger the addition of the is-focused class by the Bootstrap-JavaScript for the corresponding (bmd-)form-group. https://i.sstatic.net/2V374.png <fie ...
One common issue I face is working with tables that contain numbers requiring right alignment to ensure the ones/tens/hundreds/thousands places line up correctly. Here's an example: 2,343 1,000,000 43 43,394 232,111 In these tables, ...
I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...
<Search ref="search_box" onSearch={this.onSearch} backgroundColor="white" cancelButtonTextStyle={{ color: "red" }} placeholder="Search Food..." ...
New Question: Is there a way to smoothly transition the visibility of a div element without using display:none or CSS, as these methods remove the div from view rather than simply hiding it, causing elements below to shift? If I try setting opacity:0 or v ...
After being deployed on Heroku for about 1.5 years, my instance suddenly threw an error related to 'mongoose' not being found when attempting to deploy again. Strangely, everything works fine on my local server and my .gitignore file excludes Nod ...