有没有其他的方式来动态显示对话框
问题描述:
我已经拍下模型来显示内容点击button()
。我已经创建了代码,而且我的模式也正常工作。但我希望它能像那样显示在我窗口顶部的警告框,当我点击button()
。我尽我所能去做。但希望我不能再继续。有没有其他的方式来动态显示对话框
我plunker:https://plnkr.co/edit/MgGSEU4ZSsmF36mSLW8Y?p=preview
在这里,你可以检查出来。
答
如果你有兴趣的解决方案,更AngularJS样,看看在ngDialog服务。它将允许您将对话功能注入任何需要它的控制器。此外,它的openConfirm方法将返回一个承诺,该承诺将根据对话框关闭的方式解决或拒绝(对于您的示例来说,这似乎是一个确认/取消对话框)。
app.controller('demo', ['$scope', 'ngDialog', function($scope, ngDialog) {
$scope.openDialog = function() {
ngDialog.openConfirm({
templateUrl: 'dialog-template.html',
scope: $scope
}).then(function() {
console.log('confirm');
}).catch(function() {
console.log('cancel');
})
}
}])
下面是使用ngDialog创建一个确认/取消对话框,与屏幕右上方对齐的你的plunk分支。
答
Bootstrap Modal是一个轻量级的多用途JavaScript弹出窗口,可以自定义和响应。它可用于在网站中显示警报弹出窗口,视频和图像。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
上面的代码是从:LINK
的上面的代码说明:
- 自举具有建立在模态的模态-对话框类,其显示弹出窗口。
- 此外,您可以分段弹出窗口。这在上面的代码中完成。
- 在上面的代码中,添加了三个部分。有:标题,正文和页脚。
- 根据您的需要,您可以将模态分成任意数量的部分。
如果没有引导你可以在JQuery中做同样的还有:LINK
也许你应该尝试引导模式。如果有兴趣,我可以分享更多细节。 –
是肯定的。放下链接@TavishAggarwal – phoine
但更重要的是,我试图在没有Bootstrap的帮助下展示。如果您有任何想法,请告诉我。 – phoine