引导模式弹出表单代码不起作用

>ASP.NET

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="#loginModal" />
<div class="container">
<div class = "row">
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
&times;
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputUserName">Username</label>
<input class="form-control" placeholder="Login Username"
type="text" id="inputUserName" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

不知道为什么上面的代码在我身上不起作用。

您需要稍微更改按钮，方法是添加data-toggle="modal"和data-target="#loginModal"，并将OnClientClick的值更改为"return false"以防止由于回发而重新加载页面

<asp:Button ID="Button1" runat="server" Text="Button" data-toggle="modal" data-target="#loginModal" OnClientClick="return false" />

更多关于引导模式的信息(尽管文档使用普通按钮(

相关内容

最新更新

热门标签：