gpt4 book ai didi

javascript - Bootstrap 版本 3.3.7 模式未出现

转载 作者:行者123 更新时间:2023-12-03 04:25:59 24 4
gpt4 key购买 nike

我正在尝试显示一个模式,以便用户能够编辑他们的帖子。单击“编辑”按钮时,没有任何反应。当我尝试调试它时,它似乎不起作用,并且控制台中没有出现任何内容(即没有错误或任何内容)。我当前的 bootstrap 版本是 3.3.7。请让我知道关于我可能出错的地方的任何想法......我的 HTML:

<!DOCTYPE html>
<html>
<head>
<title>WebApp Welcome Page</title>
</head>
<body ng-controller="WelcomeCtrl">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="#/home" class="navbar-brand">WebApp</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#/welcome">Home</a></li>
<li><a href="#/addPost">Add Post</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Welcome Home {{username}} !</h3>
</div>
</div>
</div>
<div class="container">
<div class="row" ng-repeat="article in articles">
<div class="col-md-12 well well-sm">
<h4>{{article.title}}</h4>
<p>{{article.post}}</p>
<button type="submit" class="btn btn-sm btn-primary" data-target="#editModal" data-toggle="modal">Edit</button>
<button type="submit" class="btn btn-sm btn-danger">Delete</button>
</div>
</div>
</div>

<div class="container">
<div id="editModal" class="modal hide fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Edit Post Details</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" class="form-control"/>
</div>
<div class="form-group">
<label for="post">Post</label>
<textarea name="post" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm primary">Update Post</button>
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

我的.js:

'use strict';

angular.module('webApp.welcome', ['ngRoute', 'firebase'])

.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/welcome', {
templateUrl: 'welcome/welcome.html',
controller: 'WelcomeCtrl'
})
}])

.controller('WelcomeCtrl', ['$scope', 'CommonProp', '$firebaseArray', function($scope, CommonProp, $firebaseArray) {
$scope.username = CommonProp.getUser();

var ref = firebase.database().ref().child('Articles');
$scope.articles = $firebaseArray(ref);
console.log($scope.articles);
}])

最佳答案

w3school 上的示例不包含对话框 div 上的隐藏类,仅包含“模态淡入淡出”。

我还将触发按钮类型从“提交”更改为“按钮”,因为您没有提交表单。

关于javascript - Bootstrap 版本 3.3.7 模式未出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43726840/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com