I'm trying to render a 3D model using A-Frame. This is what I've done
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>glTF Test</title>
<meta name="description" content="OBJ Test">
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>.
</head>
<body>
<a-scene>
<!-- Assets definition -->
<a-assets>
<a-asset-item id="object-ref" src="/public/Scene/scene.gltf"></a-asset-item>
</a-assets>
<!-- Using the asset management system. -->
<a-gltf-model src="#object-ref" position="0 25 0"></a-gltf-model>
<!-- Camera and cursor -->
<a-camera position="0 25 15">
<a-cursor></a-cursor>
</a-camera>
<!-- Environment elements-->
<a-sky color="#000000"></a-sky>
<a-plane color="#1A1A1A" rotation="-90 0 0" width="500" height="500"></a-plane>
</a-scene>
</body>
</html>
This code works and rendering is done well.
However,I'm tryng to add some event listeners that enable to get the sceene coordinates (x, y, z) of the point where I clicked with mouse.
Is there any way to do this?
If you want to detect where the meshes were clicked, then the information is within the click event detail:
entity.addEventListener("click", e => {
console.log(e.detail.intersection.point)
})
For example:
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
const text = document.querySelector("a-text")
// listen for clicks
this.el.addEventListener("click", e => {
// log the points
//console.log(e.detail.intersection.point)
let point = e.detail.intersection.point
let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2);
text.setAttribute("value", "Click at: " + pointString)
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
<a-text position="-1 2 -3" color="black"></a-text>
<a-box class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
<a-sphere class="clickable" position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
<a-cylinder class="clickable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" foo></a-cylinder>
<a-plane class="clickable" position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane>
<a-sky class="clickable" color="#ECECEC" foo></a-sky>
</a-scene>
In case You wanted to click anywhere and get a point, it gets complicated because of mapping 2D <x, y> -> 3D <x, y, z>.
In this case I'd create a collision mesh (like a sphere) around the camera, use it to determine the clicked points.
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
const text = document.querySelector("a-text")
// listen for clicks
this.el.addEventListener("click", e => {
// log the points
//console.log(e.detail.intersection.point)
let point = e.detail.intersection.point
let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2);
text.setAttribute("value", "Click at: " + pointString)
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
<a-text position="-1 2 -3" color="black"></a-text>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-camera>
<a-sphere class="clickable" material="side: back" visible="false" foo></a-sphere>
</a-camera>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Related
controller not sending to view . I m trying to send request from controller to view , but its not redirecting . controller always redirect to index page. when i summit the form . its always redirecting same index page ,
controller not sending to view .controller not sending to view
My controller is sending to another view. but its not working .
public IActionResult userLogin([FromBody] Users user)
{
string apiUrl = "https://localhost:44331/api/ProcessAPI";
var input = new
{
email = user.email,
password = user.password
};
string inputJson = (new JavaScriptSerializer()).Serialize(input);
WebClient client = new WebClient();
client.Headers["Content-type"] = "application/json";
// client.Encoding = Encoding.UTF8;
string json = client.UploadString(apiUrl + "/userLogin", inputJson);
// List<Users> customers = (new JavaScriptSerializer()).Deserialize<List<Users>>(json);
user = JsonConvert.DeserializeObject<Users>(json);
return View();
}
and the view page is
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model myproject.Models.Users
#{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
#* <link rel="stylesheet" type="text/css" href="./includes/style.css">*#
#*<script type="text/javascript" rel="stylesheet" src="~/js/main.js"></script>*#
</head>
<body>
<div class="overlay"><div class="loader"></div></div>
<!-- Navbar -->
<br /><br />
<div class="container">
<div class="alert alert-success alert-dismissible fade show" role="alert">
#*<?php echo $_GET["msg"]; ?>*#
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#*<?php
}
?>*#
<div class="card mx-auto" style="width: 20rem;">
<img class="card-img-top mx-auto" style="width:60%;" src="./images/login.png" alt="Login Icon">
<div class="card-body">
<form id="form_login" >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
#*<input asp-for="Name" type="text" class="form-control" id="name" required />*#
<input asp-for="email" type="email" class="form-control" id="log_email" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="log_password" asp-for="password" id="log_password" placeholder="Password">
<small id="p_error" class="form-text text-muted"></small>
</div>
<button type="submit" class="btn btn-primary"><i class="fa fa-lock"> </i>Login</button>
<span>Register</span>
</form>
</div>
<div class="card-footer">Forget Password ?</div>
</div>
</div>
<input type="text" id="txtName" />
<input type="button" id="btnGet" value="Get Current Time" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#form_login").on("submit", function () {
var data = {
email: $("#log_email").val(),
password: $("#log_password").val(),
// Phone: $("#phone").val()
}
// data: $("#form_login").serialize(),
// var data = $("#form_login").serialize();
console.log(data);
$.ajax({
type: 'POST',
url: '/Process/userLogin',
// window.location.href = '#Url.Action("Process", "Dashboard")';
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (result) {
alert('Successfully received Data ');
console.log(result);
window.location.href = "Process/Dashboard";
// window.location.href = '#Url.Content("~/User/Home")';
// window.location.href = '#Url.Action("Process", "Dashboard")';
// window.location.href = DOMAIN + "/dashboard.php";
},
error: function () {
alert('Failed to receive the Data');
console.log('Failed ');
}
})
})
});
</script>
</body>
</html>
From your code, since you want to use JQuery Ajax to submit the form data to the action method, in the form submit event, you should use the event.preventDefault() to prevent the form submit action, then you can use JQuery Ajax to submit the form.
Second, does the Index page is the Process/Dashboard page? From your code, we can see in the Ajax success function, you will use the window.location.href to change the request URL, you can change the redirect page from here.
I am running an AR application inside Sveltekit with aFrame and AR.js. At the moment everything is working fine. I can read the bookmark and load a virtual element. My problem is that AR.js adjusts the html body to a larger size than it is and does not adapt if I change the screen size. Any help is welcome.
<script>
//componente para sombra en camera background
AFRAME.registerComponent("apply-shadowmaterial", {
init: function() {
// grab the mesh
let mesh = this.el.getObject3D("mesh");
// keep the reference to the old material
let tmp = mesh.material;
// assign the new material
mesh.material = new THREE.ShadowMaterial({ opacity: 0.1 });
mesh.receiveShadow = true;
// free memory
tmp.dispose();
}
});
</script>
<a-scene id="escena" class="a-frame" gesture-detector physicallyCorrectLights="true" vr-mode-ui="enabled: false" embedded arjs ="sourceType: webcam; trackingMethod: best; detectionMode: mono; sourceWidth:2048; sourceHeight:1536; displayWidth: 2048; displayHeight: 1536" always-fullscreen renderer="precision: high; antialias: false; logarithmicDepthBuffer:true; colorManagement: true" loading-screen="dotsColor: #DBDADA; backgroundColor: #282828">
<a-assets>
<a-asset-item id="blackM" src={`${storeData.assets.vectorFile}`}></a-asset-item>
</a-assets>
<a-entity id="luzdirectional" light="type: directional; color: #DDD; groundColor: #DDD; intensity: 0.2; castShadow:true; target:#marcador; shadowCameraBottom:-6.0; shadowCameraTop:6.0; shadowCameraLeft:-6.0; shadowCameraRight:6.0; " position="-5.0 6.520 5.127">
</a-entity>
<a-marker id="marcador" raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" type='pattern' url='/hiro.patt' smooth='true' smoothCount='3' smoothTolerance='0.01' smoothThreshold='2'>
<a-plane id="planosombras" position="0 -0.2 0" height="500" width="500" rotation="-90 0 0" apply-shadowmaterial></a-plane>
<a-entity
id="plato"
position="0 0 0"
rotation="0 60 0"
scale="0.1 0.1 0.1"
gltf-model={`${storeData.assets.vectorFile}`}
shadow="receive: true; cast: true"
animation__pos="property:position; from:0 0 0; to:-6 0 0; dur: 1000; startEvents:pos"
animation__scale="property:scale; from:0.1 0.1 0.1; to:0 0 0; dur: 1000; startEvents:scale"
class="clickable"
gesture-handler
>
</a-entity>
</a-marker>
<a-entity id="camera" camera="far:10000.00; fov:80.00; near:0.005">
</a-entity>
<a-entity id="luz" light="type: ambient; color: #DDD; groundColor: #DDD; intensity: 0.6" position="0 2 0">
</a-entity>
</a-scene>
<div class="nav">
<!-- <button class="btn left" onclick="backPlatillo()">❮</button>
<button class="btn right" onclick="nextPlatillo()">❯</button> -->
<div class="prod-name" id="platilloName">{storeData.title}</div>
</div>
I am working on a very basic weather app to learn MVC architecture. However, I am having an issue with my page reloading once I submit the form and then data from that submission not coming over into the next newly rendered page.
Most of my logic for my page is in my controller.js file. In my view I have a form where the user fills in a city, and then my getWeather function makes an API call where it gets the city's temperature. From there my controller.js should re-render the index page, but pass in the string It is currently ${temp} °F in ${city}.
At least, that's how its supposed to work. Unfortunately when the page reloads the weather const is null and I then have my function catch the error and give me the message "that city is not available".
I have tested my API to make sure that it is correctly retrieving the data, by console.logging the res object, and I am getting that perfectly.
Also, I should note I bring in Weather function from my model. The only thing it does is test to see if the user inputted anything into the form and if they didn't it creates the error "Please enter the name of the city." I don't think it is the source of my issue or the fix for it.
I guess what I'm looking for is a way to prevent my page from reloading when I submit the form, or a way to not lose the data in my function when the page reloads. Any help would be greatly appreciated!
const axios = require('axios')
const API_KEY= "8d130a4fe5369b01d1fe629bccbe0926";
const Weather = require("../model/Weather")
exports.renderHomePAge = (req, res) => {
res.render("index")
}
exports.getWeather = (req, res, ) => {
const city = req.body.city
const url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial`
const weather = new Weather(city)
weather.validateUserInput()
if(weather.errors.length){
res.render("index", {error: weather.errors.toString()})
} else {
axios.get(url)
.then((response)=>{
// console.log(response)
const {temp} = response.data.main
const {city} = response.data.city
res.render("index", {
weather: `It is currently ${temp} °F in ${city}.`
})
})
.catch((err) =>{
console.log(err)
res.render("index", {
weather: `That city is not avaible`
})
})
}
}
exports.renderAboutPAge = (req, res) => {
res.render("About")
}
I don't think its neccessary for this issue, but just incase here is my index.hbs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Weather | Home</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center main">
<div>
<h1 class="mt-5">MVC Weather Finder</h1>
<p class="lead">Enter the name of the city and press search!</p>
</div>
<div>
<form action="/" method="post">
<input name="city" type="text">
<button>Go!</button>
</form>
<div class="mt-3">
{{weather}}
{{error}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It turns out I was pulling data from my response object incorrectly and that was causing the issue.
I'm new to VueJS so I decided to use it for a small project. I needed to validate client entries..I googled and found vee-validate would be appropriate for my style of creating a component so I used the style found in this post https://jsfiddle.net/787g7q0e/ Below are the steps I took to reproduce the error I got.
First, I installed the vee-validate via a CDN link like so:
<script src="~/Scripts/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script src="~/Scripts/FrontEnd/Layout/Main.js"></script>
in my Layout file for APS.NET MVC
Secondly, following https://jsfiddle.net/787g7q0e/, I registered and used vee-validate like so:
const config = {
aria: false,
classNames: {},
classes: false,
delay: 0,
errorBagName: 'errors',
events: 'input|blur',
fieldsBagName: 'fields',
i18n: null,
i18nRootKey: 'validations',
inject: true,
locale: 'en',
strict: true,
validity: false
}
Vue.use(VeeValidate, config);
Vue.component('loan-calc', {
template: `<div class="row calc-holder" data-aos="fade-up" data-aos-delay="800">
<form>
<div class="wrap">
<div class="card_one">
<label for="">Loan Amount</label>
<p>The amount you want to take</p>
<div class="loan-amount-form">
<i class="icon naira">
<svg width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M14.814 5.764H13.302V7.726H14.814V9.22H13.302V13H11.286L8.244 9.22H4.716V13H2.232V9.22H0.684V7.726H2.232V5.764H0.684V4.288H2.232V0.219999H4.158L7.38 4.288H10.818V0.237999H13.302V4.288H14.814V5.764ZM4.716 7.726H7.056L5.472 5.764H4.716V7.726ZM10.116 7.726H10.818V5.764H8.55L10.116 7.726Z"
fill="#03293D" />
</svg>
</i>
<input
type="text"
name="LoanAmount"
v-validate="'required'"
v-model="LoanAmount"/>
<i class="icon pencil">
<svg width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z"
fill="#03293D" />
</svg>
</i>
</div>
</div>
</div>
</form>
</div>`,
data() {
return {
LoanAmount: null,
LoanTenure: null,
RepaymentType: null,
Repayment: null
}
}
})
From the above template, I tried using vee-validate to validate the required field like so:
<input
type="text"
name="LoanAmount"
v-validate="'required'"
v-model="LoanAmount"/>
<i class="icon pencil">
<svg width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z"
fill="#03293D" />
Kindly help or show me how I can resolve the above error and use vee-validate effectively.
Want to be able to click on a button or to copy/select content from the background/page when a modal is opened.
Found something at: Allow people to click on links under bootstrap modal when modal backdrop is not present
that recommends to use .modal{bottom:initial!important;} but this doesn't seem to work with bootstrap-vue.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="node_modules/bootstrap-vue/dist/bootstrap-vue.css" />
<style>
.modal{bottom:initial!important;}
</style>
</head>
<body>
<div id="app-2">
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template slot="button-content"><em>User</em></template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal id="modal-1" #shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop>
<p class="my-4">Hello from modal!</p>
</b-modal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="node_modules/bootstrap-vue/dist/bootstrap-vue.js"></script>
<script>
window.dragable = function (a) {
let header = a.vueTarget.$refs.header;
let el = a.vueTarget.$refs.content;
let mousePosition;
let offset = [0, 0];
let isDown = false;
header.onmousedown = (e) => {
isDown = true;
offset = [
el.offsetLeft - e.clientX,
el.offsetTop - e.clientY
];
}
header.onmouseup = (e) => {
isDown = false;
};
header.onmousemove = (e) => {
e.preventDefault();
if (isDown) {
mousePosition = {
x: e.clientX,
y: e.clientY
};
el.style.left = (mousePosition.x + offset[0]) + 'px';
el.style.top = (mousePosition.y + offset[1]) + 'px';
}
};
}
var app2 = new Vue({
el: '#app-2',
methods: {
dragable: dragable
}
})
</script>
</body>
</html>
Solution:
Adding pointer-events:none to the modal css/style
window.dragable = function(a) {
let header = a.vueTarget.$refs.header;
let el = a.vueTarget.$refs.content;
let modal = a.vueTarget.$refs.modal;
let mousePosition;
let offset = [0, 0];
let isDown = false;
modal.onmousedown = (e) => {
document.querySelectorAll('.modal').forEach(e => {
e.parentNode.style.zIndex = e.isSameNode(a.vueTarget.$refs.modal) ? 1041 : 1040;
})
}
header.onmousedown = (e) => {
isDown = true;
offset = [
el.offsetLeft - e.clientX,
el.offsetTop - e.clientY
];
document.querySelectorAll('.modal').forEach(e => {
e.parentNode.style.zIndex = e.isSameNode(a.vueTarget.$refs.modal) ? 1041 : 1040;
})
}
header.onmouseup = (e) => {
isDown = false;
};
header.onmousemove = (e) => {
e.preventDefault();
if (isDown) {
mousePosition = {
x: e.clientX,
y: e.clientY
};
el.style.left = (mousePosition.x + offset[0]) + 'px';
el.style.top = (mousePosition.y + offset[1]) + 'px';
}
};
}
var n = 0;
var app2 = new Vue({
el: '#app-2',
methods: {
dragable: dragable
}
})
.modal {
pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
</head>
<body>
<div id="app-2">
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template slot="button-content"><em>User</em></template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal id="modal-1" #shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop>
<p class="my-4">Hello from modal!</p>
</b-modal>
<b-button v-b-modal.modal-2>Launch demo modal</b-button>
<b-modal id="modal-2" #shown='dragable' title="BootstrapVue" no-close-on-backdrop hide-backdrop>
<p class="my-4">Hello from modal!</p>
</b-modal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
</body>
</html>
You can also disable the backdrop via the hide-backdrop prop, and disable close on backdrop click via the no-close-on-backdrop prop.
See docs at https://deploy-preview-3503--bootstrap-vue.netlify.com/docs/components/modal#comp-ref-b-modal
I don't quite remember modal backdrop class. But you should try to set backdrop css property pointer-events: none; it would make it "transparent" to all mouse/touch events.