javascript - 如何将 JS 函数链接到 Bootstrap 文本输入模式?
问题描述
我的页面上有一个带有文本输入字段的基本引导模式,我希望在单击上面显示的“报告错误”按钮时触发它。
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
但是我不确定在 Javascript 中触发它的最佳方法。正如您所看到的,项目已经调用了一个模式,但它不是在 HTML 中创建的模式,就像我在这个“报告错误”中所做的那样。
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
编辑
由于它的简单性,尝试了下面提到的 Data Target 方法,但是我的 Modal 没有隐藏,也没有单击按钮触发模态出现,有什么想法吗?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
解决方案
您可以通过以下方式触发模态:data-target="#exampleModal"
然后你还需要正确的模态:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
您必须以编程方式执行此操作
$('#exampleModalLabel').modal('show');
您之前需要使用 show: false 对其进行初始化,因此在您手动执行之前它不会显示。
$('#exampleModalLabel').modal({ show: false})
其中 exampleModalLabel 是模态容器的 id。
推荐阅读
- android - 为什么即使我在 xml 中有按钮 ID,它仍然会显示“未解析的引用:按钮”?
- apexcharts - 如何让 APEXChart 从 JSON AJAX 响应中呈现
- windows - GitLab Runner 未启动进程
- flutter - 无法从动画列表中删除项目'getter 'currentState' 在 null 上被调用。接收者:null 尝试调用:currentState'
- javascript - React Native NavigationContainer 不显示任何内容
- html - 在某些分辨率下,嵌入式 div 中出现不需要的空白 [chrome]
- json - 将 json 提交到休息端点时出现错误
- go - 如何避免在失败情况下重复返回 InternalServerError?
- javascript - 使用 JavaScript 或 jQuery 将字符串转换为 HTML 元素
- javascript - 将函数的结果存储在本地存储中