内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
代码如下:
<div class="modal hide" id="mbusModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>MBUS</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<form class="well form-inline">
<input type="button" class="btn" onclick="$('#dinMbusModal').modal('show'); $('#tabsMbusDin a:last').tab('show');" value="din">
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Закрыть</a>
<a href="#" class="btn btn-primary" onclick="addPort('mbus',$('#mbusDev').val(),$('#mbusSpeed').val()); $('#mbusModal').modal('hide')">Применить</a>
</div>
改变背景:
<div class="modal hide" id="dinMbusModal" style="width: 500px; margin: -250px 0 0 -250px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>DIN</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Закрыть</a>
<a href="#" class="btn btn-primary" onclick="addPort('din_mbus',,); $('#dinMbusModal').modal('hide')">Применить</a>
</div>
</div>
背景是由动态的Modal插件生成的,所以有点复杂。
.modal-color-red .modal-backdrop { background-color: #f00; } .modal-color-green .modal-backdrop { background-color: #0f0; } .modal-color-blue .modal-backdrop { background-color: #00f; }
$('.modal[data-color]').on('show hidden', function () { $('body').toggleClass('modal-color-'+ $(this).data('color')); });
<div class="modal hide fade" id="redModal" data-color="red">...</div> <div class="modal hide fade" id="greenModal" data-color="green">...</div> <div class="modal hide fade" id="blueModal" data-color="blue">...</div>