可拖动的非模态弹出Jquery Mobile

我希望在Jquery移动设备中有一个弹出窗口，它不会阻止用户与页面进行交互，并且数据不允许=“假”，当页面的另一部分与页面的另一部分交互并保持可见时，弹出窗口不会消失。

我试过这个

$('#popupNew').popup({ dismissible: false }); $('#popupNew').popup('open'); 

但是这会创建一个模式弹出窗口，阻止用户与页面的其余部分进行交互。

Answer 1

介绍

我希望这就是你需要的一切。

• 如果单击弹出窗口外的弹出窗口，则无法关闭弹出窗口
• 弹出窗口下面的元素现在可以访问
• 弹出窗口可拖动（在Firefox，Chrome，Android Chrome上测试）

几个笔记。 这里使用的一些javascript代码不是我的，我说的是一个用于使其在移动设备上可拖动的修复程序。 不幸的是，我不记得是谁的解决方案。

打开弹出窗口时，CSS用于使页面可单击。 叠加div名称是弹出ID和后缀-screen的组合，在这种情况下它是#popupBasic-screen 。

工作实例

工作示例： http ： //jsfiddle.net/Gajotres/tMpf7/

使用的代码

HTML：

             
 
 
Index page
 
 
 Basic Popup click me 
 Close 
This is a completely basic popup, no options set.
 
 
 
   

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; }