Mon*_*aas 91 modal-dialog twitter-bootstrap
我非常喜欢菜鸟,所以我认为我正在用twitter bootstrap模式监督一些事情(可能很明显).我想要做的是获得一个仅在移动设备上启动的模式.这样可以在模态div上添加类.visible-phone.到现在为止还挺好.但后来我希望它能够工作,这意味着你可以用X按钮关闭它.我无法让按钮工作.
<div class="modal visible-phone" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
在html的底部我放了jquery.js(第一个)和bootstrap.modal.js和bootstrap.transition.js.实际上所有的bootstrap js模块(不要错过包含).我对js没有经验..
如果我提出一个非常愚蠢的问题,请原谅我.我在日志中找不到这种特定情况的答案.
aya*_*les 219
$('#myModal').modal('hide') 应该这样做
art*_*nig 27
关闭引导程序模式对话框时遇到问题,如果它打开了:
$('#myModal').modal('show');
我解决了这个问题,通过以下链接打开对话框:
<a href="#myModal" data-toggle="modal">Open my dialog</a>
不要忘记初始化:
$('#myModal').modal({show: false});
我还使用了以下属性作为关闭按钮:
data-dismiss="modal" data-target="#myModal"
sha*_*111 13
将类hide添加到模态
<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >
Javascript代码
<!-- Use this to hide the modal necessary for loading and closing the modal-->
<script>
$(function(){
$('#closeModal').click(function(){
$('#myModal').modal('hide');
});
});
</script>
<!-- Use this to load the modal necessary for loading and closing the modal-->
<script>
$(function () {
$('#myModal').modal('show');
});
</script>
Sub*_*axe 13
.modal('hide')手动隐藏模态.使用以下代码关闭引导程序模型
$('#myModal').modal('hide');
要么
试试这里
$(function () {
$(".custom-close").on('click', function() {
$('#myModal').modal('hide');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<a class="custom-close"> My Custom Close Link </a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->尝试使用data-target准确指定按钮应关闭的模态.所以你的按钮应如下所示 -
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
此外,您应该只需要bootstrap.modal.js,以便您可以安全地删除其他人.
编辑:如果这不起作用,则删除可见电话类并在PC浏览器而不是电话上测试它.这将显示您是否收到javascript错误或者是否存在兼容性问题.
编辑:演示代码
<html>
<head>
<title>Test</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
$("#myModal").modal("show");
}
$("#myModalClose").click(function () {
$("#myModal").modal("hide");
});
});
</script>
</head>
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<a class="close" id="myModalClose">×</a>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
</body>
</html>
根据文件隐藏/切换应该工作.但事实并非如此.
我就是这样做的
$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body
| 归档时间： |
|
| 查看次数： |
184733 次 |
| 最近记录： |