Building a custom dialog box using Bootstrap 4 without using modals

I want to create a custom non-modal dialog box using Bootstrap 4. 

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open dialog
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          Dialog body..
        </div>
      </div>
    </div>
  </div>
</div>

I attempted to customize the modal class as shown below 

.modal{
  top:10%;
  left:50%;
  bottom:auto;
  right:auto;
  margin-left: 30%;
}

Is there anyone who can assist me with this?

cssbootstrap-4

Answer №1

To make your modal stand out, add a special class called "modalless". Here's how:

<div class="modal fade modalless" id="myModal">

Next, in your CSS, include the following styles. This will give your modal the desired look.

.modalless{
    top:10%;
    left:50%;
    bottom:auto;
    right:auto;
    margin-left:-300px;
}

For a visual example, take a look at this link.

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

Transforming brand logos through hover on image maps

Despite finding numerous posts addressing this issue, I am still encountering problems with my code: <div id="product_tabs_description_tabbed_contents" style="display: block;"><img style="margin-left: -10px; opacity: 1 !important;" src="{{media u ...

htmlcssimagedictionaryhover

The alignment of the third column div is off and not displaying properly

I am having some trouble with aligning the divs on my page in a column layout. Despite setting the first two divs to float left, the third one does not align properly. I want the third div to be floated right and aligned with the first two. You can see an ...

csshtml

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

cssbootstrap-4

The elements within the HTML, CSS, and Bootstrap are all clashing and

Website Output https://i.sstatic.net/5JVyg.jpg I've been working on a small website with a bootstrap carousel, and in this specific section of the program, the Bootstrap and HTML/CSS elements overlap by default. I'm not sure how to separate the ...

htmlcssbootstrap-4carousel

Tips for displaying a loading indicator above a form

I've been struggling to figure out how to display a loading indicator on top of my form without messing up the styling... https://i.sstatic.net/FFCRW.png My goal is to show the loading indicator when any action, like deleting an item or changing qua ...

javascriptcssreactjsoverlaymobx-react

The WordPress Customizer fails to update the CSS after making changes and saving them to an external stylesheet

I was looking for a way to improve the performance of my WordPress website by saving the styles from the Customizer into an external stylesheet for caching purposes. I found this code that allows me to save the custom styles into an external CSS file: $cs ...

phphtmlcsswordpress

Modify the colors of <a> elements with JavaScript

I am brand new to the world of UI design. I am encountering an issue with a static HTML page. (Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code) What I would like to achie ...

javascripthtmlcss

Troubles with Borders and Padding in HTML Elements

Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the ...

htmlcss

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

javascripthtmlcsstypescript

How to achieve a text border effect using inner glow technique

Can someone help me recreate this unique text design? The font used is Gill Sans MT and the text color is a shade of purple although it may be hard to discern. https://i.sstatic.net/HGrB8.png I have been struggling to achieve the vibrant thick border and ...

css

Discovering the center of an element and implementing a left float

I'm looking for a way to dynamically position the element #ucp_arrow in the middle of a div using float: left. Here is an illustration: https://i.stack.imgur.com/nzvgb.png Currently, I have hard-coded it like this: JAVASCRIPT: $("#a_account").cli ...

javascriptjqueryhtmlcss

Issue with the alignment of cards in the group of cards

Struggling to align the bottom sections of these elements. Despite consulting Bootstrap references, I can't figure out what's causing this misalignment. I thought using the card-group class would align the bottoms of its children, but it doesn&a ...

angularbootstrap-4

Superimpose one element on top of another

My current page layout includes the following code: <div class="card"> <div class="card-block"> <h4 class="card-title text-muted">UltimateWarrior15</h4> <h6 class="card-subtitle text-muted"> Ad ...

htmlcssbootstrap-4

Troubleshooting Cascading Style Sheet problem on Samsung Galaxy S5

In developing a Cordova Android application, I designed a CSS specifically for screen resolutions of 1080 x 1920. This CSS is accessed using media queries. @media screen and (max-width: 680px) and (orientation:portrait) //Compatible with Galaxy S5 or @m ...

htmlcsscordovaphonegap-pluginsandroid

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

javascriptjqueryhtmlcss

Looking for help to prevent my bootstrap nav bar from collapsing and showing a hamburger menu on mobile devices. This is my first CSS project and I am seeking guidance

Looking for help keeping my bootstrap nav bar from collapsing on mobile devices (want it to display a hamburger icon). I'm new to CSS so any guidance is appreciated! This is the code for my nav bar using bootstrap classes... <nav class="navb ...

cssbootstrap-5

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...

javascriptjqueryhtmlcss

Is there a way to display my WhatsApp number, email, and location using icons?

[Apologies for my English not being perfect] I came across this image on and I'm curious about how to add similar WhatsApp, email, and location buttons on my own website. Can anyone assist me with this? Initially, I mistook these elements for images ...

javascripthtmlcssreactjsweb

Is it possible to gradually open or close a div element?

Looking for a way to add an effect to the code below that opens/closes a div on mouseover above an image. Any examples or suggestions? I'm not exactly a javascript expert. HTML: <div> <div class="under"><img src="http://oi60.tinypic.c ...

javascriptjqueryhtmlcss