可拖动的非模态弹出窗口Jquery Mobile
Draggable Non-Modal Popup Jquery Mobile
我想在Jquery mobile中有一个弹出窗口,它不会阻止用户与页面交互,数据可忽略="false",即当与页面的另一部分交互并保持可见时,弹出窗口不会消失。
我试过这个
$('#popupNew').popup({ dismissible: false });
$('#popupNew').popup('open');
但这会创建一个模式弹出窗口,阻止用户与页面的其他部分进行交互。
简介
我希望这就是你所需要的一切。
- 如果单击弹出窗口外部的曲面,则无法关闭弹出窗口
- 弹出窗口下方的元素现在可以访问
- Popup是可拖动的(在Firefox、Chrome、Android Chrome上测试)
没有更多的音符。这里使用的一些javascript代码不是我的,我说的是一个用于在移动设备上拖动的修复程序。不幸的是,我记不清是谁的解决方案了。
CSS用于在弹出窗口打开时使页面可点击。Overlaydiv名称是popup id和后缀screen的组合,在本例中为#popupBasic-screen
。
工作示例
工作示例:http://jsfiddle.net/Gajotres/tMpf7/
使用的代码
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop" >Basic Popup</a>
<a data-role="button" id="test">click me</a>
<div data-role="popup" id="popupBasic" data-dismissible="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>This is a completely basic popup, no options set.</p>
</div>
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#popupBasic').draggable({
cursor: 'move'
});
$(document).on('click', '#test', function(){
alert('Successful click!');
});
});
// This is a fix for mobile devices,, rest of the code is not mine
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
CSS:
#popupBasic-screen {
display: none;
}
相关文章:
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- 基于窗口宽度jquery的函数的替代方法是什么
- Jquery Onclick将数据发送到新打开的窗口
- jQuery调整大小函数只适用于窗口
- 是否可以使用Jquery操作窗体的目标窗口
- 使用jQuery可以根据窗口大小更改滑块的css高度
- 弹出窗口-jQuery Mobile、Backbone.js和Require.js
- 如何将文本框弹出窗口(Jquery 工具提示或类似工具)添加到画布中的 Fabric JS 图像
- 如何在点击弹出窗口jQuery内应用悬停效果
- 如何关闭模型弹出窗口jquery
- 从新打开的窗口jquery中删除一个节点
- 可拖动的非模态弹出窗口Jquery Mobile
- 在弹出窗口Jquery(灯箱)中打开照片
- 将Modal定位到当前窗口-jQuery
- 什么是窗口?jQuery和窗口.美元的意思
- 在新的窗口jquery功能不工作
- 警告中心元素窗口(jQuery)
- 条形码扫描器触发下一个按钮点击事件和弹出窗口JQuery
- 如何从另一个弹出窗口中的链接调用弹出窗口.Jquery Mobile
- 如何重用剑道ui窗口jquery