Bootstrap and Angularjs are used to match the example code of homemade pop-up frames

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;
}
});
}
}
});

&lt;button class="btn btn-xs btn-warning" data-target="#myModal" data-toggle="modal" ng-click="sss()">Pop box</button>&lt;div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" bs-popup="" ng-model="test"
 style="display: none;"&gt;
&lt;div class="modal-dialog"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-header alert-info"&gt;
&lt;button aria-hidden="true" data-dismiss="modal" class="close" type="button"&gt;×&lt;/button&gt;
&lt;h4  class="modal-title"&gt;Pop-up frame&lt;/h4&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
&lt;button class="btn btn-info" ng-click="hhh()"&gt;test&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.modal-content --&gt;
&lt;/div&gt;
&lt;!-- /.modal-dialog --&gt;
&lt;/div&gt;