如何使用Bootstrap 3 modal for javascript alert（）？ [英] How to use 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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
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（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
