Close Modal when mouse leaves

After creating a modal using bootstrap, I'm wondering if there is a way to close the modal by simply moving the mouse away?

Thank you

DEMO

HTML

<button (mouseenter)="onMouseEnter($event)" (mouseleave)="onmouseleave($event)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        Modal body..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
angulartypescriptbootstrap-4bootstrap-modal

Answer №1

I've enhanced it slightly, currently experimenting with triggering the close action on mouseleave.

After reviewing both the provided answer and the documentation, I discovered a crucial point.

The documentation highlights that "Modals use position: fixed, which may lead to specific rendering issues. To prevent potential conflicts with other elements, always ensure to place your modal HTML in a top-level position."

To address this, I included 'position: fixed' in the .css file under the .modal class.

In addition to refining the mouseleave functionality, I took note of another tip from the documentation. It mentions that clicking on the modal backdrop will automatically close the modal, as demonstrated in the added Stackblitz project, effectively eliminating any flickering issues.

source: Bootstrap

Stackblitz: Stackblitz

This response from 8 months ago might offer valuable insights as well: Closing Angular on mouseover - recommended another approach

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

Ways to postpone the initialization of an Angular application in order to display animations

Incorporating a loading animation into my Angular application has been a recent enhancement. The animation is positioned between the <app-root> HERE </app-root> tags. To ensure proper display and functionality of this animation, I am looking t ...

angular

Issue with BootstrapVue b-table: selected rows are not saved when moving between pages with b-pagination

I implemented a b-table along with b-pagination in my Vue template: <b-table bordered hover responsive :items="items" :fields="fields" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" sort-icon-le ...

javascriptvue.jsbootstrap-4bootstrap-vue

Exploring ways to retrieve the subscribe method when using forkJoin in testing situations

Here is the method in question: setup() { const observables$ = { summary1: this.service1.getSummary(data), summary2: this.service2.getSummary()}; forkJoin(observables$).subscribe((res) => { if(res.summary1) { // perform so ...

angularrxjs

Find the combination of all potential function outputs

I'm trying to figure out why the compiler doesn't infer A as a union type like string[] | number[] when it fails. Instead, A is inferred as the first return value, which in this case is string[]. Is there a solution to this issue? const define = ...

typescript

How can I restrict the highest possible date selection in reactjs?

I am working on a project that requires users to select dates using datetime-local, but I want to limit the selection to only three months ahead of the current date. Unfortunately, my current implementation is not working as expected. Any assistance woul ...

reactjstypescript

What is the best way to align an image in the center of a Bootstrap 4 layout within a Ruby on

I'm having an issue with my code. The image is not centered as expected. Can anyone provide assistance? Thank you! <%= image_tag "avatar.png", size: "120x120", class: "center-block, :alt => "avatar" %> ...

ruby-on-railsbootstrap-4

Is there a way to prevent the expansion of "--base-href" to an absolute path during the npm build process?

Currently working with Angular 14 and NPM 8. I've been using the following command to build my artifact... npm run build -- --source-map --base-href=/my-app/ --output-path=dist/my-app/ An issue arises when the index.html file in dist/my-app is create ...

angularnpmhrefradixnpm-build

Utilizing Solid.js: Integrating useContext inside a provider triggered by an external event

const CounterContext = createContext(); export function CounterProvider(props) { const [count, setCount] = createSignal(0), store = [ count ]; return ( <CounterContext.Provider value={store}> {props.children} </Co ...

typescriptsolid-js

Prettyprint XML in Angular 8+ without using any external libraries

I am working with Angular 8+ and I need to display XML content in a nicely formatted way on my HTML page. The data is coming from the backend (Java) as a string, and I would like to present it in its XML format without relying on any external libraries or ...

htmlangularxmlnpmformat

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: https ...

cssreactjstypescriptnext.jsclassname

How to Resolve File Paths in CSS Using Angular 7 CLI

My assets folder contains an image named toolbar-bg.svg, and I am attempting to use it as the background image for an element. When I use background: url('assets/toolbar-bg.svg'), the build fails because postcss is unable to resolve the file. How ...

cssangularsasscommand-line-interfaceassets

How to update a page in Ionic 2

Does anyone know how to refresh just one page in ionic2 without rebuilding the entire app? I have tried using: window.location.reload(); and location.reload(); but it seems to reload the entire app. Is there a way to refresh only a specific page (scr ...

javascripthtmlangularionic2refresher

Are event handler props in Typescript Polymorphic React Components being misassigned?

After making some adjustments, I enhanced the code to improve its readability. interface ModifiedProps<T extends ElementType> { as?: T; } type UpdatedProps<T extends ElementType> = ModifiedProps<T> & ComponentPropsWithoutRef<T ...

reactjstypescripttypescript-generics

Ensuring Form Validation in Real Time as Users Input Data in Angular 2

I have successfully implemented form validation using the following code: import { FormGroup, Validators, FormControl } from "@angular/forms"; Currently, I have disabled the Submit button until the form is filled out correctly. The only indication given ...

angulartypescriptangular2-template

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

htmlangulartypescript

What is the best way to define properties within a Typescript interface when the key names contain dynamic elements?

I am working with an object that can have multiple properties, each one unique with a numerical value in its name. For example: const obj = { 'data-element-0': 'something', 'data-element-1': 'something else', ...

typescriptmapped-types

Validation of parameter data types in Typescript

I need help differentiating between React.MouseEvent and React.KeyboardEvent in my TypeScript component foo(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) { if(e is mouse event) { //do something } else ...

reactjstypescript

Signaling the completion of a stream to a BehaviorSubject

When working with Angular 2, I encountered an issue with the mySubject (see code) function. It compiles a complete() function, but an error occurs during execution stating that there is no such function. I tried using onComplete() instead, but it didn&apos ...

angularrxjsbehaviorsubject

How to implement separate environment.ts files for different languages in Angular 12? For example, environment.en.ts and environment.de.ts files

Recently, I've been developing a multi-language Angular application and successfully deployed it to Firebase hosting. If you visit , you'll see the German version. On the other hand, displays the English version of the app. One challenge I enc ...

angularlocalizationenvironment

The active class in the navbar is malfunctioning in Bootstrap 4

I've been searching high and low to figure out how to add an active class to the current open link in my navbar. I've scoured Google and Stack Overflow for answers, but everything I found only applies to hash-type navbars using href="#". None of ...

javascriptjquerytwitter-bootstrapbootstrap-4dom-events