在纯javascript中从函数打开模式

我想用纯javascript（而不是jquery）打开一个带有函数的模式

从何处调用函数的组件：

<div class="col-sm-5 offset-sm-5" 
    style={{ bottom: "60px", marginBottom: "20px", marginTop: "23px" }}>
    <button class="btn btn-primary btn-sm" onClick={this.handleSubmit.bind(this)}>Save</button>
</div>

<script type="text/javascript"> 
function openModal() {
  var myModal = new bootstrap.Modal(document.getElementById('myModal'), {  keyboard: false });
  myModal.show();
}
</script>

模态代码：

<div class="modal fade" id="exchangehouse" tabindex="-1" role="dialog" 
    aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

情态标题
&时代；
...
接近
保存更改

---

谢谢你在找这个吗

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

/*模式（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}

开放模态
&时代；
你的内容

通常情况下，可见性的模态选项在状态下作为布尔类型进行管理

必须将可见性的值更改为true（打开）或false（关闭），如果没有将可见性设置为false的函数，则无法关闭模式

这意味着您需要使用“函数”来更改“可见性值”，该值位于“状态”中，以控制模态视图

以反应的方式

view =( open modal )==> action === ( visibility) ==> state ===( change the value)===> view

而且你的问题很抽象

---

无论如何，我希望我的答案能对您有所帮助。

这里是一个现代的纯ES6模式窗口实现

我还包括一些简单的打开/关闭挂钩

类模式窗口{
构造函数（选项）{
this.opts=Object.assign（{}，ModalWindow.\u defaultOptions，options）
this.modal=document.querySelector（this.opts.selector）
this.initialize（）
这是一个
this.afterRender（）
}
初始化（）{
if（this.opts.headerText）{
this.query（'.md dialog header text'）。textContent=this.opts.headerText
}
if（this.opts.htmlContent）{
this.query（'.md dialog content'）.innerHTML=this.opts.htmlContent
}else if（this.opts.textContent）{
this.query（'.md dialog content'）.textContent=this.opts.textContent
}
if（this.opts.theme）{
this.modal.classList.add（`md theme-${this.opts.theme}`）
}
}
addEventHandlers（）{
此.query（'.md对话框标题close btn'）。addEventListener（'单击'，（e）=>{
此.setVisible（false）
})
如果（this.opts.mode！==“model”）{
this.modal.addEventListener（'click'，（e）=>{
如果（e.target==this.modal）{
此.setVisible（false）
}
})
}
}
afterRender（）{
if（this.opts.show==true）{
此.setVisible（true）；
}
}
设置可见（可见）{
this.modal.classList.toggle（'md-dialog-visible'，visible）
如果（可见）{
this.onOpen（）//类方法重写或回调（如下）
if（typeof this.opts.onOpen==='function'）{
this.opts.onOpen（this.modal）
}
}否则{
this.onClose（）//类方法重写或回调（如下）
if（typeof this.opts.onClose==='function'）{
this.opts.onClose（this.modal）
}
}
}
查询（儿童选择器）{
返回此.modal.querySelector（childSelector）
}
//示例挂钩
onOpen（）{}
onClose（）{}
}
ModalWindow.\u默认选项={
选择器：'.md对话框'，
秀:假,，
模式：“模态”
}
类MyCustomModalWindow扩展了ModalWindow{
构造函数（选项）{
超级（选项）
}
onOpen（）{
console.log（'Opened！'）//或者您可以使用options.onOpen
}
onClose（）{
console.log（'Closed！'）//或者您可以使用options.onClose
}
}
let modal=新建MyCustomModalWindow({
show:true，//在创建时显示模式
模式：null，//禁用模式，允许单击外部关闭
标题文字：“你好，世界！”，
htmlContent:“这是弹出窗口的一个示例。
”，
主题:"黑暗",，
onClose：（self）=>{
log（'另一个关闭钩子…'）
}
})
document.querySelector（“#显示模式btn”）.addEventListener（'click'，（e）=>{
modal.setVisible（true）
})

.md对话框{
显示：无；
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.md-dialog.md-dialog-visible{
显示：块；
}
.md对话框.md对话框窗口{
边框：1px实心#888；
背景色：#fefe；
宽度：80%；
利润率：10%自动；
}
.md对话框.md对话框标题{
位置：相对位置；
宽度：钙（100%-0.5em）；
高度：1.667em；
字体大小：粗体；
字号：1.33em；
线高：1.667em；
填充：0.125em 0.25em；
背景色：#DDD；
}
.md对话框.md对话框标题关闭btn{
位置：绝对位置；
字体大小：粗体；
排名：0；
右：0；
<button type="button" class="btn btn-primary" onclick='openModal()'>
        Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript"> 
function openModal() {
  var myModal = new bootstrap.Modal(document.getElementById('myModal'), {  keyboard: false });
  myModal.show();
}
</script>