标签: modal-dialog
Javascript在模态窗口关闭时停止HTML5视频播放
我在模态窗口上有一个html5视频元素.当我关闭窗口时,视频继续播放.我是JS的新手.有一种简单的方法可以将视频播放停止功能与窗口关闭按钮联系起来吗？以下是我的html页面:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Modal Test</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
return false;
});
});
</script>
<style type="text/css">
div#simpleModal
{
position:absolute;
top: 40px;
width: 320px;
left: 170px;
border: solid 1px #bbb;
padding: 20px;
background: #fff;
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
opacity: 0.0;
-webkit-transition: opacity 0.0s ease-out; z-index: 0;
}
div#simpleModal.show
{
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}
</style>
</head>
<body>
<a href="" …推荐指数
解决办法
查看次数
在twitter bootstrap模式中自动对焦输入
我有这样的问题 - 我需要在twitter bootstrap模式中自动聚焦一些元素(在它显示之后).棘手的部分在这里 - 这个模态的内容是使用'data-remote'(jQuery.load方法)从单独的HTML文件加载的,所以
$(document).on('shown', ".modal", function() {
$('[autofocus]', this).focus();
});
仅在之前加载模态时才有效.
问题是 - 如何在第一次模态加载时使自动对焦工作？
推荐指数
解决办法
查看次数
Twitter Bootstrap:打印模态窗口的内容
我正在使用Bootstrap开发一个站点,它有28个模态窗口,其中包含不同产品的信息.我希望能够在开放模式窗口中打印信息.每个窗口都有一个id.
<!-- firecell panel & radio hub -->
<div class="modal hide fade" id="fcpanelhub">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3>5000 Control Panel & Radio Hub</h3>
</div>
<div class="modal-body">
<img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
<img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
因此,如果我在modal-footer- 'print'中添加一个新按钮,并且单击它我想要打印该模态.我会说javascript会被使用吗？如果是这样,我如何告诉javascript只打印开放模式,而不是其他模式？
所有帮助赞赏.
推荐指数
解决办法
查看次数
Twitter Bootstrap模式将html内容推向左侧
如果我打开一个模态对话框,通过Twitter Bootstrap,我注意到它将页面的所有html内容(即,在container)中向左推了一点,然后在关闭之后将其恢复正常.但是,这仅在浏览器宽度足够大而不能在"移动"(即最小)媒体查询上时才会发生.最新版本的FF和Chrome(未测试其他浏览器)会出现这种情况.
你可以在这里看到问题:http://jsfiddle.net/jxX6A/2/
注意:您必须增加"结果"窗口的宽度,以便切换到"med"或"large"媒体查询css.
我根据Bootstrap网站上显示的示例设置了页面的HTML:
<div class='container'>
<div class='page-header'>
<h4>My Heading</h4>
</div>
<div id='content'>
This is some content.
</div>
<div class='footer'>
<p>© 2013, me</p>
</div>
</div>
我猜这不应该发生,但我不确定我做错了什么.
编辑:这是一个已知的错误,有关更多(和最新)的信息,请参阅:https://github.com/twbs/bootstrap/issues/9855
推荐指数
解决办法
查看次数
jQuery:通过Ajax加载模态对话框内容
目前我的模态对话框是这样的
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
</head>
<body>
<div id="dialog" title="Title Box">
<p>Stuff here</p>
</div>
<script type="text/javascript">
jQuery(
function() {
jQuery("#dialog")
.dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
}
);
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body>
</html>
加载的Div包含在同一页面中.如何在显示对话框时将该div移动到第二页并通过Ajax加载内容？我可以重用脚本来根据需要加载不同的内容吗？
推荐指数
解决办法
查看次数
make bootstrap twitter dialog modal draggable
我正在尝试用这个jquery插件制作bootstrap twitter对话模式draggable:
http://threedubmedia.com/code/event/drag#demos
但它不起作用.
var $div = $('html');
console.debug($('.drag'));
$('#modalTest')
.drag("start", function(ev, dd) {
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $(this).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $(this).outerWidth();
})
.drag(function(ev, dd) {
$(this).css({
top: Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY))
, left: Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX))
});
});
你知道我该怎么办？
推荐指数
解决办法
查看次数
C#/ .NET messagebox不是模态的
为什么C#/ .NET消息框不是模态的？
无意中,如果消息框在我们的主UI后面,那么主UI不响应,直到我们单击OK(在我们的消息框上).
除了创建自定义消息框之外,还有其他解决方法吗？
推荐指数
解决办法
查看次数
UIModalPresentationFormSheet调整大小视图
我想知道在使用时,我如何调整视图大小UIModalPresentationFormSheet的modalPresentationStyle,它看起来像它有一个固定的大小,所以我在想,如果有任何人都设法操纵从大小角度弹出视图.
所以有UIModalPresentationFormSheet一个固定的视图大小或完整的视图,我在介于两者之间.
推荐指数
解决办法
查看次数
如何在swift中居中popoverview
我有以下代码来显示没有箭头的popoverview(对话框),它工作正常.唯一的问题是,对话框显示在左上角(IPad).我想将视图置于屏幕中心.
在我的下面的代码中要更改或添加什么？:
func show_help(){
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let controller = storyboard.instantiateViewControllerWithIdentifier("Help") as! UIViewController
controller.modalPresentationStyle = UIModalPresentationStyle.popover
let popoverPresentationController = controller.popoverPresentationController
// result is an optional (but should not be nil if modalPresentationStyle is popover)
if let _popoverPresentationController = popoverPresentationController {
// set the view from which to pop up
_popoverPresentationController.sourceView = self.view;
_popoverPresentationController.permittedArrowDirections = UIPopoverArrowDirection.allZeros;
// present (id iPhone it is a modal automatic full screen)
self.presentViewController(controller, animated: true, completion: nil)
}
}
额外的信息
在我的视图中,链接到我的viewcontroller我设置了这样的优先大小:
override …推荐指数
解决办法
查看次数
如何在会话超时时关闭所有活动的引导程序模式？
我需要在用户空闲时拨打电话并通过会话时间,这将关闭所有Bootstrap模式.活跃的模态取决于用户当时正在做什么,所以我想做一些全面的事情.
我试过了:
$('.modal').modal('toggle');
当超时发生但我的模态仍在那里.
推荐指数
解决办法
查看次数
标签 统计
modal-dialog ×10
jquery ×5
javascript ×3
ajax ×1
c# ×1
css ×1
dialog ×1
draggable ×1
html5-video ×1
ios ×1
ipad ×1
presentation ×1
printing ×1
swift ×1