asp.net - Modal 上不显示按钮和输入
问题描述
按钮是输入字段未显示在 .aspx 页面内的模式上,但标签可见
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
输出(缺少按钮和输入字段):
解决方案
我为您报告的模式弹出窗口尝试了相同的 html,并且它运行良好。我认为您缺少 css 或其他 css 正在隐藏您的模态元素。看看这里:
function showModal()
{
$('#mdl_filter').modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<input type="button" id="btnShow" onclick="showModal();" value="Show Modal"/>
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
推荐阅读
- python - ValueError:不支持无值(优化器)
- mysql - 如何使用 MySQL 和 NodeJS 获得一行?
- python - PyDev:ValueError:关闭文件上的 I/O 操作
- windows-10 - 为什么在 windows 10 64 位上删除大约 5000 个非常小的文件(大约 100 字节)需要这么长时间
- python - 使用 Python(psycopg2 库)在 Postgresql 中插入 INET 类型数组的正确方法是什么
- angular - 使用 ngFor 变量清除 tr 行
- c# - 实体框架始终返回 null
- android-studio - 如何使用文本视图、按钮和吐司创建活动?
- c# - 我已经为 funion 发送了 2 个通用参数,第一个是 char,第二个是 int 为什么第一个如果 cond 有效?
- android - ExoPlayer 强制质量冲刺