Bootstrap和Angularjs配合自制弹框的实例代码

前端技术 2023/09/04 JavaScript

指令

directive(\'bsPopup\', function ($parse) {
return {
require: \'ngModel\',
restrict: \'A\',
link: function (scope, elem, attrs, ctrl) {
scope.$watch(function () {
return $parse(ctrl.$modelValue)(scope);
}, function (newValue) {
if (newValue ==0) {
$(elem).modal(\'hide\');
return;
}
if (newValue == 1) {
$(elem).modal(\'show\');
return;
}
});
}
}
});
<button class=\"btn btn-xs btn-warning\" data-target=\"#myModal\" data-toggle=\"modal\" ng-click=\"sss()\">弹框</button>
<div aria-hidden=\"true\" aria-labelledby=\"myModalLabel\" role=\"dialog\" tabindex=\"-1\" class=\"modal fade\" bs-popup=\"\" ng-model=\"test\"
id=\"myModal\" style=\"display: none;\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header alert-info\">
<button aria-hidden=\"true\" data-dismiss=\"modal\" class=\"close\" type=\"button\">×</button>
<h4 id=\"myModalLabel\" class=\"modal-title\">弹框</h4>
</div>
<div class=\"modal-body\">
<button class=\"btn btn-info\" ng-click=\"hhh()\">测试</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

以上所述是小编给大家介绍的Bootstrap和Angularjs配合自制弹框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!

本文地址:https://www.stayed.cn/item/10691

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。