Tips for displaying Modal Bootstrap at the bottom of the screen

Is there a way to configure Bootstrap so that the modal appears at the bottom of the browser?

https://jsfiddle.net/9fg7jsu3/

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">  
        <div class="modal-content">
           <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
            <p>content</p>
        </div>
      </div>
    </div>

I would like the end result to look something like this:

https://i.sstatic.net/mYNS7.png

Any assistance on achieving this would be greatly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

That method should get the job done. Now, it's important to adjust the paddings, margins, and width to properly fit your modal;

.modal-dialog {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}

Make sure to use modal-dialog instead of just modal to ensure that the modal disappears when clicked above it.

Check out this link for more information

Answer №2

For the 

<div class="modal-dialog" ...
element, you can incorporate the following:

<div class="modal-dialog modal-dialog-centered" style="align-items: flex-end;">
    ...
</div>

Answer №3

Success! This solution did the trick for me

.popup-window {
  top: calc(100% - 200px); 
}

Answer №4

For me, this snippet of code did the trick flawlessly:

.modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0%;
  right: 0%;
  transform: translate(-50%, -50%);
}

It's worth noting that in Bootstrap 5, the recommended solution alters the width without any clear rationale.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The parameter "file" needs to be a string data type, but npm run deploy to gh-pages received an undefined data type instead

I encountered an error while attempting to deploy a react application to gh-pages. Despite having successfully done it in the past, this is the first time I am facing this specific issue. The error message reads: The "file" argument must be of type string ...

javascriptreactjsnpmgithub-pages

Create an array containing the data returned from the Observable<{string, number, string}[]> stream

Currently I am working on creating an Angular 9 app, and I need to return an array with my response. Within the service class, I have a method like this: getReport(startDate: string, endDate: string) { return this.http.get<ReportReport>( ...

javascriptangulartypescript

Refresh the current page and log out the authenticated user

One issue I am facing is with a button on my website that is supposed to reload the page. However, when this button is pressed, it unexpectedly logs out the user and redirects them to the homepage. I am implementing passport-local for user authentication ...

htmlnode.jspassport-local

How can I detect a change in user input using jQuery?

When utilizing jquery .oninput with an element, the event will trigger instantly whenever there is a change in the input value. In my scenario, it is necessary for me to validate the input value by calling the service immediately after any changes occur. ...

javascriptjqueryhtml

How to use jQUERY to retrieve the parent directory of a given URL

Is there a way to use Ajax in loading an xml file that is situated in a different folder within the root directory? Could someone guide me on how to retrieve the root directory path using jQuery? What is the best method to navigate to the parent direct ...

jqueryajax

Stable navigation for seamless website navigation

I am experiencing an issue with the fixed navigation at the top of my site. The navigation links to sections further down on the page, but it overlaps part of the section I link to instead of stopping exactly at the beginning of the section. You can see an ...

htmlcssnavigationhyperlink

If the URL changes, update the class to activate the menu state

Trying to create an active state using jQuery but encountering issues... Here is the code that is not functioning as expected: <script type="text/javascript> jQuery.noConflict(); jQuery(document).ready(function() { jQuery('ul#menuHov a[href ...

jqueryurlnavigation

a tool for linking with the central computing api using node.js

Seeking a way to connect to a mainframe API directly from a webpage or browser. The mainframe API is currently accessible by the webserver but not directly exposed to web traffic. This particular API sends back 40,000 bytes of data per packet and utilizes ...

javascriptangularjsnode.jsmainframecics

Error message: "Named export cannot be identified"

My file structure looks like this: routes auth login index.js Login.jsx routes.js Within the routes.js file, I have the following code snippet: import { Route } from 'react-router-dom'; import { Login } from './login ...

javascriptreactjsecmascript-6import

How can I utilize Axios in Vue.js to access a local JSON file?

I'm trying to figure out how to read a local JSON file using Axios. The data.json file is located in public/info/data.json. However, every time I attempt to make a get request, I receive a 404 error message. Here is the content of data.json: [ {" ...

javascriptvue.js

When using Codeigniter 3.1.11 and Jquery (AJAX), there seems to be an issue with retrieving the value of csrf_cookie_name using $.cookie

After going through multiple discussions on stackoverflow and various articles online, I have attempted all suggested solutions for CSRF issues when sending an AJAX request via JQuery, but so far, nothing has worked for me. Codeigniter Version: 3.1.11 JQu ...

phpjquerycodeignitersecuritycsrf

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...

ioscssbackground-color

What is the method utilized by Redux to store data?

I am currently developing a small application to enhance my understanding of how to utilize redux. Based on my research, redux allows you to store and update data within the store. In my application, I have implemented an HTML form with two text inputs. Up ...

javascriptreactjsreduxactionreducers

Is the maxJsonLength property in the web.config referenced by JQuery's Ajax?

Within my ASP.NET platform, I implement Jquery AJAX to retrieve JSON data (essentially a string) from a webservice upon clicking the search button: $.ajax({ type: "POST", url: url, data: JSON.stringify(parameterArray), contentType: "application/j ...

javascriptjqueryasp.netjsonweb-config

What is the best way to access the second array in a JSON object?

I have successfully implemented autocomplete with JSON and PHP. It is working fine, but now I am facing a challenge in retrieving the second array from the JSON data. Below is the script I have used in source.php: <?php $req = "SELECT namaBarang, har ...

javascriptphpjson

Ways to maintain the position of a column when the one before it is hidden?

Is there a way to keep the third column in place when the second column is hidden upon clicking a button? Take a look at my code snippet below: <div class="row"> <div class="col-3"> Column 1 </div> <div class="col-3 test"& ...

jquerycssbootstrap-4

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

javascripthtmlcss

The selected rows in Datatables.js do not retain their selection status after calling ajax.reload()

As per the information provided on the Datatables website, the feature "retain row selection over a data reload" should work seamlessly. However, I am facing issues with it when using data from an ajax source. Below is the code snippet showcasing how I am ...

javascriptajaxdatatables

Sending properties through the React Router to a specific component

Within my component, I have a material table that triggers a function when the edit button is clicked: //MaterialTable.js ... const handleEdit = (e, Data) => { console.log(Data) return(<EditFunction id={Data.id} />) ... The purpose of ...

javascriptreactjsmaterial-uireact-router-dommaterial-table

Modify the database once authorized by the administrator

`I have a webpage that showcases testimonials. I am looking to only display the testimonials with a "status" of "1" in my database. How can I quickly update the "status" column from "0" to "1" right after the admin clicks on update? I am also incorporati ...

javascriptphpjquerymysqlajax