如何使用Bootstrap 3 modal for javascript alert（）？

本文介绍了如何使用Bootstrap 3 modal for javascript alert（）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果我在HTML标头的JavaScript代码中有警告，例如

 < head> 
 ... 
< script> 
 ... 
 if（errors）alert（'发生以下错误：\ n'+ errors）; 
 ... 
< / script> 
< / head>

是否有一种方法可以使用Bootstrap中的模式窗口而不是浏览器的本机警报窗口？

如果是这样，有人能给我看一个简单的例子，用于我上面的一行代码吗？

解决方案

首先，将模态的html添加到一个模式中id

< div id =alertModalclass =modal fade> < div class =modal-dialog> < div class =modal-content> < div class =modal-header> < button class =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>找到错误！< / h4> < / div> < div class =modal-body> < p>< / p> < / div> < div class =modal-footer> < button class =btn btn-defaultdata-dismiss =modal> 关闭< /按钮> < / div> < / div><！ - /.modal-content - > < / div><！ - /.modal-dialog - > < / div><！ - /.modal - >

其次，修改你的javascript设置模式主体的内容并显示它

 < script> 
 ... 
 if（errors）{
 var message ='发生以下错误：\ n'+ errors; 
 $（'＃alertModal'）。find（'。modal-body p'）。text（message）; 
 $（'＃alertModal'）。modal（'show'）
} 
 ... 
< / script>

If I have an alert in my javascript code in the HTML header, such as,

<head>
...
<script>
...
if (errors) alert('The following error(s) occurred:\n'+errors);
...
</script>
</head>

is there a way I can use a modal window from Bootstrap instead of the browser's native alert window?

If so, can someone show me a simple example for the one line of code I have above? The modal should just have an "OK" button (nothing fancy).

解决方案

First, add the html for the modal with an id

<div id="alertModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Errors Found!</h4> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal"> Close</button> </div> </div> </div></div>

Second, modify your javascript to set the content of the modal body and show it

<script>
...
if (errors) {
    var message = 'The following error(s) occurred:\n' + errors;
    $('#alertModal').find('.modal-body p').text(message);
    $('#alertModal').modal('show')
}
...
</script>

这篇关于如何使用Bootstrap 3 modal for javascript alert（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！