[英]Bootstrap modal not working in React typescript app but working on the fiddle
As per my current research: 根据我目前的研究:
tried removing fade class , no difference 尝试删除淡入淡出类 ,没有区别
assets are loaded in the order , no difference as such 资产按顺序加载,因此没有区别
Here is a debug version https://preprod-ansaar.web.app/ 这是一个调试版本https://preprod-ansaar.web.app/
I have implemented a bootstrap modal in my app.tsx
: 我在我的
app.tsx
实现了一个引导模式:
import React from 'react';
const app: React.FC = () => {
return (
<div>
<button id="btn1">Show Modal</button>
<br />
<button data-onclick="alert('Button Clicked')">Another Button</button>
<div className="modal fade" id="myModal" data-tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div className="modal-body">
Modal Body
</div>
<div className="modal-footer">
<button className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default app;
My index.css
is: 我的
index.css
是:
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
And in the index.html
I have: 在
index.html
我有:
<script>
$('#btn1').click(function () {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
</script>
The same code is generating a draggable modal while keeping background usable on the fiddle 相同的代码生成可拖动的模态,同时保持背景在小提琴上可用
The same is not working in my React app, can anyone please guide on this? 同样在我的React应用程序中不起作用,有人可以对此进行指导吗?
Use React strap . 使用React表带。
npm i reactstrap
NPM我Reactstrap
<Modal isOpen={true}><Modal/>
As suggested by @nithin in the comments The click handlers are registered before the DOM
is ready which makes it redundant. 正如@nithin在注释中所建议的那样 ,在
DOM
准备就绪之前注册了单击处理程序,这使其变得多余。 Try moving the click handlers to componentDidMount
. 尝试将点击处理程序移动到
componentDidMount
。
componentDidMount() {
//modal logic goes here
}
And the fiddle works because DOM
is already initialized (Since you are not using react there) before the script executes 小提琴之所以起作用,是因为在脚本执行之前已经初始化了
DOM
(因为您在那里没有使用react)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.