Conceal the Navigation Bar Upon the Pop Up's Appearance

I Designed a Landing Page with a Fixed Mobile Nav Bar at the Bottom.

There is also a Pop-Up Form that appears when clicked. How can I make sure the Nav Bar is closed when the form pops up?

This issue is blocking the Send Button.

Is it possible to achieve this using JavaScript?

Here is the code for the Nav Bar:

<div class="navbar1">
    <a href="#" class="product-action-btn-1" title="Quick View" data-bs-toggle="modal" data-bs-target="#exampleModal">Take an Offer</a>
</div>

You can view the landing page here

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

https://i.sstatic.net/83J57.png

javascripthtmlcss

Answer №1

To achieve this effect, you can utilize the css property z-index instead of relying on javascript.

Currently, your bottom navigation bar has a z-index of 9999, while your .modal has a z-index of 1060. To ensure that the modal appears on top, all you need to do is set the z-index of .modal to a value higher than that of .navbar1.

An easy solution would be to update your CSS like so:

.modal { z-index: 10000; }

Answer №2

To efficiently manage the visibility of an element, consider creating a designated class for hiding it and toggling this class whenever you want to show or hide the element.

document.getElementsByClassName('navbar1')[0].classList.add('hidden')
document.getElementsByClassName('navbar1')[0].classList.remove('hidden')

Another option is to utilize classList.toggle if both the display and dismissal actions occur within the same function.

Answer №3

Conceal your Navigation Bar when it is clicked.

<script>
function hideNavbar() {
  document.getElementsByClassName("navbar1").style.display = "none";
}
</script>


<div class="navbar1">
    <a onclick="hideNavbar()"  href="#" class="product-action-btn-1" title="Quick View" data-bs-toggle="modal" data-bs-target="#exampleModal"></i>Grab the Deal</a>
</div>

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

What are some strategies to enhance the efficiency of this code and reduce repetition?

Here's an overview of the component in question export default () => { const { currentUser, logout } = useAuth(); const [sideBarOpen, setSideBarOpen] = useState(false); const theme = useTheme(); const classes = useStyles(); const isSmall ...

javascriptreactjsmaterial-uirefactoring

Issue with React hook state persistence in recursive function

I implemented a recursion custom hook that utilizes a setTimeout function to provide 3 chances for an operation. Once the chances run out, the recursion should stop. However, I encountered an issue where the setTimeout function is not properly decrementin ...

javascriptreactjsreact-hooksclosures

Html5 declares that the statuses of values are not defined

In a chrome extension, I am encountering an issue with the following code: var DB = openDatabase('CMPDB', '1.0', 'Database for CMP', 4 * 1024 * 1024); LoadFromDB(); function LoadFromDB() { DB.transaction( function(t ...

javascriptsqldatabasesqliteclient-side

What is the best way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

I am facing an issue with my page that displays transaction search results. I have a search filter based on the "Token" column and when clicked, the search criteria should be set, and the search params should be passed as form-data in a POST method. Howeve ...

javascriptjqueryrubyajaxruby-on-rails-3

When running nodemon in an npm project without any arguments, it fails to execute the value specified in the "main" field of the package.json

My current npm project has the following folder structure: project ├── node_modules │ └── (node_modles folders) ├── server.js ├── index.js ├── index.html ├── package.json └── package-lock.json The JavaScr ...

javascriptnode.jsnpmpackage.jsonnodemon

What is the best way to establish and concentrate on a fresh component in AngularJS?

I am working on a form that has a dynamic number of inputs, which is controlled by AngularJS. <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ...

javascriptjqueryhtmlangularjsevents

A Study on Particle Systems using THREE.js

While working on my particle System in THREE.js with SPARK.js, I have completed the necessary code for the system. However, I am facing an issue where nothing related to the Particle System is being displayed on the screen. Currently, I am trying to creat ...

javascriptthree.jswebgl

Assembly of Components

As someone new to angular, I am currently in the process of building an angular2 application. My goal is to dynamically create a series of DOM components using the data provided below: // Class construct with properties sorted alphabetically export class ...

htmlangulartypescript

Is NextJS Route Handler in Version 13 Really Secure?

Within my forthcoming NextJS 13 web application, I am in the process of integrating an API through route handlers to facilitate functions like user registration and login procedures. Is it considered safe when transmitting sensitive data like a user's ...

javascriptreactjshttpnext.jshttps

Upon clicking on a different div, a div will elegantly slide down from above the footer

I'm struggling with sliding a div from the bottom of the page. Here is my JSFIDDLE Currently, when I click on the blue box (arrow-hover), the div slides up (box-main). However, to hide the div (box-main) again, I have to click inside the box-main d ...

javascriptjqueryhtmlcss

Route fallback not yet resolved

Is it possible to set up a fallback route in angular routes? For instance, is there a way to specify a fallback route like this: $routeProvider .when('/a', { templateUrl: 'a.html', controller: 'aCtrl' ...

javascriptangularjsdesign-patterns

Is it possible for a React blog to be included in search engine results?

As I work on building my blog using React, Node.js, Express, Sequelize, and other technologies, a question has arisen in my mind: Will search engines index my articles, or will only the homepage of my site be noticed? For instance, if I have an article ti ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

The random number generator in TypeScript not functioning as expected

I have a simple question that I can't seem to find the answer to because I struggle with math. I have a formula for generating a random number. numRandomed: any; constructor(public navCtrl: NavController, public navParams: NavParams) { } p ...

javascriptmathtypescriptrandomionic2

Loading images in advance using jCarousel

I need help with preloading images on a jCarousel that loads a JSON feed and generates necessary HTML. Can anyone suggest a way to accomplish this task efficiently? $(".banner ul").jcarousel({ itemLoadCallback:loadTopBanner, auto: 6, wrap: ...

javascriptjqueryjcarousel

Rails does not transfer data-attributes in HTML5

I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...

javascriptjqueryruby-on-railshtml

What is the best way to send an array of objects to a Node.js server?

What is the method for sending an array of objects with user data to the server for verification? I am attempting to pass orderform data to a server for validation and then display it on a different page after redirection. const addProductsToServer = (ev ...

javascriptnode.jsexpressserver

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

I am currently using Metro CSS (Windows 8 style) and running into an issue. Within my container, there are alerts displayed in blue, and above that is 'IT-CENTER'. When I click on 'IT-CENTER', a button should appear, but it seems to be ...

javascripthtmlcssmicrosoft-metrometro-ui-css

Determine the maximum and minimum numbers by inputting a number and utilizing jQuery

<script type="text/javascript"> function findLargestNumber() { var number1, number2; number1 = Number(document.getElementById("N").value); number2 = Number(document.getElementById("M").value); if (number1 > numb ...

javascriptjqueryarraystypescriptif-statement

My @media queries are causing me some issues

Struggling with my @media queries. Once I upload my website on github, it fails to scale properly. However, when testing it in Webstorm (JetBrains), everything seems to be working fine. Any assistance would be greatly appreciated! Here is the link to my w ...

htmlcsswebscalemedia

Execute a JavaScript function repeatedly, with a specified delay incorporated into it

I am currently working on a JavaScript function that cycles through background images within a div. The function works well, but it stops once all the images have been displayed. How can I make it start over again after going through all the images? $(do ...

javascriptjquery