有没有其他的方式来动态显示对话框

我已经拍下模型来显示内容点击button()。我已经创建了代码，而且我的模式也正常工作。但我希望它能像那样显示在我窗口顶部的警告框，当我点击button()。我尽我所能去做。但希望我不能再继续。有没有其他的方式来动态显示对话框

我plunker：https://plnkr.co/edit/MgGSEU4ZSsmF36mSLW8Y?p=preview

在这里，你可以检查出来。

来源

2017-09-27 phoine

也许你应该尝试引导模式。如果有兴趣，我可以分享更多细节。 –

是肯定的。放下链接@TavishAggarwal – phoine

但更重要的是，我试图在没有Bootstrap的帮助下展示。如果您有任何想法，请告诉我。 – phoine

如果你有兴趣的解决方案，更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分支。

Updated Plunk using ngDialog

ngDialog GitHub repository and instructions

来源

2017-09-27 10:37:32 10BitDev

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">&times;</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

来源

2017-09-27 09:24:19

有没有其他的方式来动态显示对话框

回答

相关问题