使用BootStrap 3的原创的模态框组件，没法弹出！估计是原创的bug ...

最近在给客户开发一个CRM系统，其中用到了BOOTSTRAP的模态框。版本是3。由于是刚开始用该框架。以是在正式部署到项目中前，需要测试一下，找到框架中的如下部分。需要说明的是。我用的asp.net mvc框架开发。测试也是在asp.net  mvc环境下。

 复制版本3中的代码如下：

1. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
2. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
3. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
4. ...more buttons...
6. <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
7.   <div class="modal-dialog" role="document">
8.     <div class="modal-content">
9.       <div class="modal-header">
10.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
11.         <h4 class="modal-title" id="exampleModalLabel">New message</h4>
12.       </div>
13.       <div class="modal-body">
14.         <form>
15.           <div class="form-group">
16.             <label for="recipient-name" class="control-label">Recipient:</label>
17.             <input type="text" class="form-control" id="recipient-name">
18.           </div>
19.           <div class="form-group">
20.             <label for="message-text" class="control-label">Message:</label>
21.             <textarea class="form-control" id="message-text"></textarea>
22.           </div>
23.         </form>
24.       </div>
25.       <div class="modal-footer">
26.         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
27.         <button type="button" class="btn btn-primary">Send message</button>
28.       </div>
29.     </div>
30.   </div>
31. </div>

复制代码

上述代码经过改造，放在自己的mvc环境中：

1.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="s">Open modal for s</button>
2.     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
3.         <div class="modal-dialog" role="document">
4.             <div class="modal-content">
5.                 <div class="modal-header">
6.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
7.                     <h4 class="modal-title" id="exampleModalLabel">New message</h4>
8.                 </div>
9.                 <div class="modal-body">
10.                     <form>
11.                         <div class="form-group">
12.                             <label for="recipient-name" class="control-label">Recipient:</label>
13.                             <input type="text" class="form-control" id="recipient-name">
14.                         </div>
15.                         <div class="form-group">
16.                             <label for="message-text" class="control-label">Message:</label>
17.                             <textarea class="form-control" id="message-text"></textarea>
18.                         </div>
19.                     </form>
20.                 </div>
21.                 <div class="modal-footer">
22.                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
23.                     <button type="button" class="btn btn-primary">Send message</button>
24.                 </div>
25.             </div>
26.         </div>
27.     </div>
28. </div>

复制代码

 运行，结果没法弹出模态框。后细致查找发现问题出在button的代码上面：

1.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="s">Open modal for s</button>

复制代码

发现该代码是bootstrap 3版本的写法，遂换成如下bootstrap 5的写法：

1. <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="hello">Open modal for hello</button>

复制代码

然后OK!

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。