My website is built using Bootstrap 4. I have a navigation menu where a modal drops down when the MENU button is clicked. However, I am facing an issue with activating links within the modal. I've tried everything but the links just won't work. Is there something specific I need to do in order to make the bootstrap modal attributes trigger links properly? Any assistance on this matter would be greatly appreciated.
... ...By default, Bootstrap 4 modal disables the "pointer-events" attribute. To enable links within the modal, include the following in your style.css:
.modal-dialog {
pointer-events: all;
}
After adding this code, the links should work as expected.
It seems like there are some issues with the structure of your HTML code, particularly in relation to the Bootstrap modal structure. Make sure to follow the correct format for better functionality!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<style type="text/css">
// Your custom styles here
</style>
<title>Crossings Realty</title>
</head>
<body>
// Your navigation bar and modal content here
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>You have overlooked the necessary class names for a bootstrap modal. While you included some custom classes for the content and body, it's essential to include modal-content and modal-body for the modal to function correctly. I have added them below and verified that the links are functioning as expected. However, you may need to make adjustments to your custom styles since some of your content is now not visible due to conflicts with the default modal styles.
a {
color: inherit;
text-decoration: inherit;
}
a:hover {
color: inherit;
text-decoration: inherit;
}
body {
font-family: 'Roboto Condensed', sans-serif;
}
/* ---------------------------------------------------- */
/* navigation */
.navbar-toggler:focus, .navbar-toggler:active {
outline: none;
border: none;
box-shadow: none;
}
.menu {
padding-left: 10px;
}
.fa-bars, .menu {
color: #006699 !important;
}
.navbar-text {
color: gray;
}
.mainlink {
font-size: 1.75em;
line-height: 1.25em;
font-weight: 400;
}
.sublink {
font-size: 1em;
line-height: 1.15em;
}
// More CSS code...
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
// Head content...
</head>
<body>
// Body content...
</body>
</html>To make the necessary changes, follow these steps:
The classes such as model-nav-body are not default in Bootstrap; they are custom classes that you have applied which is causing the error.
a {
color: inherit;
text-decoration: inherit;
}
a:hover {
color: inherit;
text-decoration: inherit;
}
body {
font-family: 'Roboto Condensed', sans-serif;
}
/* ---------------------------------------------------- */
/* navigation */
.navbar-toggler:focus, .navbar-toggler:active {
outline: none;
border: none;
box-shadow: none;
}
.menu {
padding-left: 10px;
}
.fa-bars, .menu {
color: #006699 !important;
}
.navbar-text {
color: gray;
}
.mainlink {
font-size: 1.75em;
line-height: 1.25em;
font-weight: 400;
}
.sublink {
font-size: 1em;
line-height: 1.15em;
}
.navbar-toggle {
margin-left: 15px;
margin-right: 0;
}
.modal-nav-content {
/* width: 100%; */
height: auto;
}
.modal-nav-body {
margin-top: 10em;
}
.modal-nav-body p {
color: white;
margin: 0;
padding: 0;
padding-top: 6px;
padding-bottom: 6px;
/* width: 100%; */
}
.modal-nav-body h5 {
color: white;
line-height: 1.5em;
font-size: 2.75em;
font-weight: 700;
/* padding-left: 2em; */
padding-bottom: 1.5em;
}
.navbar-toggler::before {
border: none;
background: transparent !important;
}
.navbar-text {
display: inline-block;
word-spacing: 2em;
}
.navbar-text a {
color: #808080;
}<!doctype html>
...
</html>I am experiencing difficulty in aligning my navbar. When I resize the window, the navbar overlaps with the logo... Here is the Fiddle Here is the code: <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background: rgba(0,0, ...
When deploying my project, I utilize gulp to build the source files directly on the server. In order to avoid caching issues, a common practice is to add a unique number to the request URL as explained in this article: Preventing browser caching on web app ...
I am attempting to connect the length of an array from another service to my controller's scope in the following manner: app.controller('TestCtrl', function ($scope, safePostService) { $scope.count = safePostService.queue.length; $ ...
I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png I have made an attempt at it with the following code: <div class ...
I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...
$(window).load(function() { $("#Button").click(function() { alert('clicked') $("#div").load(" #div > *"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script ...
As a newcomer to VueJs, I am exploring how to create a component that enables multiple selection with a search option and the ability to select all or deselect all options. To achieve this functionality, I am utilizing the vue-element-ui library. You can ...
Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...
Hey everyone, I'm currently working on a Vue project and I have been attempting to create a recursive tree from a flat list. My goal is to toggle the expanded property of each item when clicked, but for some reason, it's not updating. The issue ...
I am interested in developing an application similar to Samsung Health that will involve heavy querying on a database. I am unsure whether it would be more beneficial to create a custom server using Node.js (with Express.js) instead of using the integrate ...
In my struct example, I have a two-dimensional array: type Foo struct{ testArray[9][9] int } My goal is to access it using a template. For instance: tmpl.Execute(w, foo) //foo is a pointer to Foo struct and w represents the parsed html website How can ...
Check out this list I have: https://i.sstatic.net/NPZ1V.png It is generated by this code snippet: <select multiple size=11 ng-model="AvailableColumns" ng-show="NamesAvailable" ng-options="item for item in names"> ...
Can I download a specific version of winston through npm by using the command: npm install winston=2.2.0 The reason I am asking is because I am encountering an issue with my existing code written in version 2.2.0 when I download the latest version. The ...
I am struggling to display a button in my ui-grid only when the field value is not an empty string. I attempted using the ng-if directive, but it is not functioning as expected. Below is the snippet from my grid options: { field: 'ReleaseStatus&apo ...
Recently, I encountered an issue while using Chrome. Inside a table, there is an editable DIV with a width defined in percentage. The CSS for the DIV looks like this: div#editable { width:20%; white-space:nowrap; overflow:hidden; borde ...
Below is the code for implementing a text range filter in SQL: function fnCreateTextRangeInput(oTable) { //var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch; th.html(_fnRangeLabelPart(0)); var sFromId = oTable. ...
There is an issue with my function that reads a JSON file and updates it using the fs.writeFile method. When I invoke this function multiple times, it fails to update the file properly. After the first call, it adds extra curly brackets at the end of the J ...
Can someone please help me troubleshoot why the form in the Bootstrap modal is not submitting? This is the HTML code for the modal (sidebar.php) <!-- Beginning of Joel's modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dia ...
I have a single input field and multiple calculated output fields using JavaScript :Click here to view the screenshot of the calculated problem You can see the live preview on this link: . When you visit this link, enter "Base on your annual bill amount: ...
I am facing an issue with my html template where the data from an Angular factory is only loaded once when the page initially loads. Subsequent page openings show the same results from the first backend call, indicating a potential caching issue within the ...