首页js使用Bootstrap弹出一个具有BootStrap样式的警告框，请给我写个实例

js使用Bootstrap弹出一个具有BootStrap样式的警告框，请给我写个实例

时间: 2024-05-02 09:19:49 浏览: 99

好的，以下是一个使用Bootstrap和JS弹出具有Bootstrap样式的警告框的示例代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap警告框实例</title>  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <button onclick="showAlert();" class="btn btn-primary">点击弹出警告框</button>  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <script> function showAlert() { // 使用Bootstrap的alert组件创建一个警告框 var alertHtml = '<div class="alert alert-warning alert-dismissible fade show" role="alert">'; alertHtml += ' <strong>警告！</strong> 这是一条警告消息。'; alertHtml += ' <button type="button" class="close" data-dismiss="alert" aria-label="Close">'; alertHtml += ' <span aria-hidden="true">×</span>'; alertHtml += ' </button>'; alertHtml += '</div>'; // 将警告框添加到页面中 $(alertHtml).appendTo('body'); } </script> </body> </html> ``` 该示例会在页面中创建一个按钮，当用户点击该按钮时，会弹出一个具有Bootstrap样式的警告框。警告框中的文本内容可以根据具体需求自行修改。

阅读全文