堆棧內存溢出
  簡體   English   中英

jQuery移動彈出窗口中的多個復選框

[英]Multiple checkboxes in jQuery mobile pop-up

 原文  2017-06-19 17:48:52  9   2    jquery/ html/ css/ jquery-ui/ jquery-mobile

問題描述

http://jsfiddle.net/yptgdhqv/2/

滾動到彈出窗口中的最后一個復選框元素，然后單擊。 焦點停留在第一個元素上，窗口返回到頂部。 為什么會這樣？ 我試過給每個復選框/標簽唯一ID，這不是問題。

這是jQuery mobile 1.4.5中的一個錯誤嗎？ 在早期版本中不會發生這種情況。

編輯：這顯然是兩個獨立的問題。 我不關心焦點的變化。 但是窗口滾動是一個問題，無論彈出窗口中的內容是什么類型都會發生，無論是復選框還是段落元素。 

        <div data-role="content">
            <a href="#" data-role="button" id="test-button">Test popup</a>
            <div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                  <h1>Delete Page?</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">

                <form>

                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                     <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                     <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                     <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                     <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>
                    <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label>



                    <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                  <p>This action cannot be undone.</p>
                  <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
                  <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>  
                </div>
                </form>              
            </div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

2 個解決方案

解決方案1
 0  2017-06-19 20:55:02

將您的Popup放在頁面之外並通過代碼初始化它： 

$(function(){
    $( "#confirmDialog" ).enhanceWithin().popup();
});

以下是外部彈出窗口的參考： 在多個頁面中使用相同的彈出窗口

順便說一句，請注意你的代碼片段中有很多問題，但我想你是要從舊的JQM版本遷移到1.4.5而你還沒有調整整個東西......

解決方案2
 0  2018-03-15 14:52:51

Y有同樣的問題設置a

數據角色=“彈出”

在你的內容中

加

$（“＃confirmDialog”）。stronghanceWithin（）。popup（）;

最后
並為彈出窗口設置主題 

 $('#index').live('pagebeforeshow',function(e,data){ $('#test-button').live('click', function(e) { $('#confirmDialog').css('overflow-y', 'scroll'); $('#confirmDialog').popup('open'); }); }); $('#confirmDialog').on({ popupbeforeposition: function() { var maxHeight = $(window).height() - 30; $('#confirmDialog').css('max-height', maxHeight + 'px'); } }) $( "#confirmDialog" ).enhanceWithin().popup(); (function($, undefined ) { $.widget( "mobile.simpledialog2", $.mobile.widget, { options: { version: '1.0.1-2012061300', // jQueryMobile-YrMoDaySerial mode: 'blank', // or 'button' themeDialog: 'b', themeInput: false, themeButtonDefault: false, themeHeader: 'a', fullScreen: false, fullScreenForce: false, dialogAllow: false, dialogForce: false, headerText: false, headerClose: false, buttonPrompt: false, buttonInput: false, buttonInputDefault: false, buttonPassword: false, blankContent: false, blankContentAdopt: false, resizeListener: true, safeNuke: true, forceInput: true, showModal: true, animate: true, transition: 'pop', clickEvent: 'click', zindex: '500', width: '280px', left: false, top: false, callbackOpen: false, callbackOpenArgs: [], callbackClose: false, callbackCloseArgs: [] }, _eventHandler: function(e,p) { // Handle the triggers var self = e.data.widget, o = e.data.widget.options; if ( ! e.isPropagationStopped() ) { switch (p.method) { case 'close': self.close(); break; case 'html': self.updateBlank(p.source); break; } } }, _create: function () { var self = this, o = $.extend(this.options, this.element.jqmData('options')), initDate = new Date(), content = $("<div class='ui-simpledialog-container ui-overlay-shadow ui-corner-all ui-simpledialog-hidden " + ((o.animate === true) ? o.transition : '') + " ui-body-" + o.themeDialog + "'></div>"); if ( o.themeButtonDefault === false ) { o.themeButtonDefault = o.themeDialog; } if ( o.themeInput === false ) { o.themeInput = o.themeDialog; } $.mobile.sdCurrentDialog = self; if ( typeof $.mobile.sdLastInput !== 'undefined' ) { delete $.mobile.sdLastInput; } self.internalID = initDate.getTime(); self.displayAnchor = $.mobile.activePage.children('.ui-content').first(); if ( self.displayAnchor.length === 0 ) { self.displayAnchor = $.mobile.activePage; } self.dialogPage = $("<div data-role='dialog' data-theme='" + o.themeDialog + "'><div data-role='header'></div><div data-role='content'></div></div>"); self.sdAllContent = self.dialogPage.find('[data-role=content]'); content.appendTo(self.sdAllContent); self.sdIntContent = self.sdAllContent.find('.ui-simpledialog-container'); self.sdIntContent.css('width', o.width); if ( o.headerText !== false || o.headerClose !== false ) { self.sdHeader = $('<div style="margin-bottom: 4px;" class="ui-header ui-bar-'+o.themeHeader+'"></div>'); if ( o.headerClose === true ) { $("<a class='ui-btn-left' rel='close' href='#'>Close</a>").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true }); } $('<h1 class="ui-title">'+((o.headerText !== false)?o.headerText:'')+'</h1>').appendTo(self.sdHeader); self.sdHeader.appendTo(self.sdIntContent); } if ( o.mode === 'blank' ) { if ( o.blankContent === true ) { if ( o.blankContentAdopt === true ) { o.blankContent = self.element.children(); } else { o.blankContent = self.element.html(); } } $(o.blankContent).appendTo(self.sdIntContent); } else if ( o.mode === 'button' ) { self._makeButtons().appendTo(self.sdIntContent); } self.sdIntContent.appendTo(self.displayAnchor.parent()); self.dialogPage.appendTo( $.mobile.pageContainer ) .page().css('minHeight', '0px').css('zIndex', o.zindex); if ( o.animate === true ) { self.dialogPage.addClass(o.transition); } self.screen = $("<div>", {'class':'ui-simpledialog-screen ui-simpledialog-hidden'}) .css('z-index', (o.zindex-1)) .appendTo(self.displayAnchor.parent()) .bind(o.clickEvent, function(event){ if ( !o.forceInput ) { self.close(); } event.preventDefault(); }); if ( o.showModal ) { self.screen.addClass('ui-simpledialog-screen-modal'); } $(document).bind('simpledialog.'+self.internalID, {widget:self}, function(e,p) { self._eventHandler(e,p); }); }, _makeButtons: function () { var self = this, o = self.options, buttonHTML = $('<div></div>'), pickerInput = $("<div class='ui-simpledialog-controls'><input class='ui-simpledialog-input ui-input-text ui-shadow-inset ui-corner-all ui-body-"+o.themeInput+"' type='"+((o.buttonPassword===true)?"password":"text")+"' value='"+((o.buttonInputDefault!==false)?o.buttonInputDefault.replace( '"', "&#34;" ).replace( "'", "&#39;" ):"")+"' name='pickin' /></div>"), pickerChoice = $("<div>", { "class":'ui-simpledialog-controls' }); if ( o.buttonPrompt !== false ) { self.buttonPromptText = $("<p class='ui-simpledialog-subtitle'>"+o.buttonPrompt+"</p>").appendTo(buttonHTML); } if ( o.buttonInput !== false ) { $.mobile.sdLastInput = ""; pickerInput.appendTo(buttonHTML); pickerInput.find('input').bind('change', function () { $.mobile.sdLastInput = pickerInput.find('input').first().val(); self.thisInput = pickerInput.find('input').first().val(); }); } pickerChoice.appendTo(buttonHTML); self.butObj = []; $.each(o.buttons, function(name, props) { props = $.isFunction( props ) ? { click: props } : props; props = $.extend({ text : name, id : name + self.internalID, theme : o.themeButtonDefault, icon : 'check', iconpos: 'left', corners: 'true', shadow : 'true', args : [], close : true }, props); self.butObj.push($("<a href='#'>"+name+"</a>") .appendTo(pickerChoice) .attr('id', props.id) .buttonMarkup({ theme : props.theme, icon : props.icon, iconpos: props.iconpos, corners: props.corners, shadow : props.shadow }).unbind("vclick click") .bind(o.clickEvent, function() { if ( o.buttonInput ) { self.sdIntContent.find('input [name=pickin]').trigger('change'); } var returnValue = props.click.apply(self, $.merge(arguments, props.args)); if ( returnValue !== false && props.close === true ) { self.close(); } }) ); }); return buttonHTML; }, _getCoords: function(widget) { var self = widget, docWinWidth = $.mobile.activePage.width(), docWinHighOff = $(window).scrollTop(), docWinHigh = $(window).height(), diaWinWidth = widget.sdIntContent.innerWidth(), diaWinHigh = widget.sdIntContent.outerHeight(), coords = { 'high' : $(window).height(), 'width' : $.mobile.activePage.width(), 'fullTop' : $(window).scrollTop(), 'fullLeft': $(window).scrollLeft(), 'winTop' : docWinHighOff + ((widget.options.top !== false) ? widget.options.top : (( docWinHigh / 2 ) - ( diaWinHigh / 2 ) )), 'winLeft' : ((widget.options.left !== false) ? widget.options.left : (( docWinWidth / 2 ) - ( diaWinWidth / 2 ) )) }; if ( coords.winTop < 45 ) { coords.winTop = 45; } return coords; }, _orientChange: function(e) { var self = e.data.widget, o = e.data.widget.options, coords = e.data.widget._getCoords(e.data.widget); e.stopPropagation(); if ( self.isDialog === true ) { return true; } else { if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) { self.sdIntContent.css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden'); } else { self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden'); } } }, repos: function() { var bsEvent = { data: {widget:this}, stopPropagation: function () { return true; }}; this._orientChange(bsEvent); }, open: function() { var self = this, o = this.options, coords = this._getCoords(this); self.sdAllContent.find('.ui-btn-active').removeClass('ui-btn-active'); self.sdIntContent.delegate('[rel=close]', o.clickEvent, function (e) { e.preventDefault(); self.close(); }); if ( ( o.dialogAllow === true && coords.width < 400 ) || o.dialogForce ) { self.isDialog = true; if ( o.mode === 'blank' ) { // Custom selects do not play well with dialog mode - so, we turn them off. self.sdIntContent.find('select').each(function () { $(this).jqmData('nativeMenu', true); }); } self.displayAnchor.parent().unbind("pagehide.remove"); self.sdAllContent.append(self.sdIntContent); self.sdAllContent.trigger('create'); if ( o.headerText !== false ) { self.sdHeader.find('h1').appendTo(self.dialogPage.find('[data-role=header]')); self.sdIntContent.find('.ui-header').empty().removeClass(); } if ( o.headerClose === true ) { self.dialogPage.find('.ui-header a').bind('click', function () { setTimeout("$.mobile.sdCurrentDialog.destroy();", 1000); }); } else { self.dialogPage.find('.ui-header a').remove(); } self.sdIntContent.removeClass().css({'top': 'auto', 'width': 'auto', 'left': 'auto', 'marginLeft': 'auto', 'marginRight': 'auto', 'zIndex': o.zindex}); $.mobile.changePage(self.dialogPage, {'transition': (o.animate === true) ? o.transition : 'none'}); } else { self.isDialog = false; self.selects = []; if ( o.fullScreen === false ) { if ( o.showModal === true && o.animate === true ) { self.screen.fadeIn('slow'); } else { self.screen.removeClass('ui-simpledialog-hidden'); } } self.sdIntContent.addClass('ui-overlay-shadow in').css('zIndex', o.zindex).trigger('create'); if ( o.fullScreen === true && ( coords.width < 400 || o.fullScreenForce === true ) ) { self.sdIntContent.removeClass('ui-simpledialog-container').css({'border': 'none', 'position': 'absolute', 'top': coords.fullTop, 'left': coords.fullLeft, 'height': coords.high, 'width': coords.width, 'maxWidth': coords.width }).removeClass('ui-simpledialog-hidden'); } else { self.sdIntContent.css({'position': 'absolute', 'top': coords.winTop, 'left': coords.winLeft}).removeClass('ui-simpledialog-hidden'); } $(document).bind('orientationchange.simpledialog', {widget:self}, function(e) { self._orientChange(e); }); if ( o.resizeListener === true ) { $(window).bind('resize.simpledialog', {widget:self}, function (e) { self._orientChange(e); }); } } if ( $.isFunction(o.callbackOpen) ) { o.callbackOpen.apply(self, o.callbackOpenArgs); } }, close: function() { var self = this, o = this.options, retty; if ( $.isFunction(self.options.callbackClose) ) { retty = self.options.callbackClose.apply(self, self.options.callbackCloseArgs); if ( retty === false ) { return false; } } if ( self.isDialog ) { $(self.dialogPage).dialog('close'); self.sdIntContent.addClass('ui-simpledialog-hidden'); self.sdIntContent.appendTo(self.displayAnchor.parent()); if ( $.mobile.activePage.jqmData("page").options.domCache != true && $.mobile.activePage.is(":jqmData(external-page='true')") ) { $.mobile.activePage.bind("pagehide.remove", function () { $(this).remove(); }); } } else { if ( self.options.showModal === true && self.options.animate === true ) { self.screen.fadeOut('slow'); } else { self.screen.addClass('ui-simpledialog-hidden'); } self.sdIntContent.addClass('ui-simpledialog-hidden').removeClass('in'); $(document).unbind('orientationchange.simpledialog'); if ( self.options.resizeListener === true ) { $(window).unbind('resize.simpledialog'); } } if ( o.mode === 'blank' && o.blankContent !== false && o.blankContentAdopt === true ) { self.element.append(o.blankContent); o.blankContent = true; } if ( self.isDialog === true || self.options.animate === true ) { setTimeout(function(that) { return function () { that.destroy(); };}(self), 1000); } else { self.destroy(); } }, destroy: function() { var self = this, ele = self.element; if ( self.options.mode === 'blank' ) { $.mobile.sdCurrentDialog.sdIntContent.find('select').each(function() { if ( $(this).data('nativeMenu') == false ) { $(this).data('selectmenu').menuPage.remove(); $(this).data('selectmenu').screen.remove(); $(this).data('selectmenu').listbox.remove(); } }); } $(self.sdIntContent).remove(); $(self.dialogPage).remove(); $(self.screen).remove(); $(document).unbind('simpledialog.'+self.internalID); delete $.mobile.sdCurrentDialog; $.Widget.prototype.destroy.call(self); if ( self.options.safeNuke === true && $(ele).parents().length === 0 && $(ele).contents().length === 0 ) { ele.remove(); } }, updateBlank: function (newHTML) { var self = this, o = this.options; self.sdIntContent.empty(); if ( o.headerText !== false || o.headerClose !== false ) { self.sdHeader = $('<div class="ui-header ui-bar-'+o.themeHeader+'"></div>'); if ( o.headerClose === true ) { $("<a class='ui-btn-left' rel='close' href='#'>Close</a>").appendTo(self.sdHeader).buttonMarkup({ theme : o.themeHeader, icon : 'delete', iconpos: 'notext', corners: true, shadow : true }); } $('<h1 class="ui-title">'+((o.headerText !== false)?o.headerText:'')+'</h1>').appendTo(self.sdHeader); self.sdHeader.appendTo(self.sdIntContent); } $(newHTML).appendTo(self.sdIntContent); self.sdIntContent.trigger('create'); $(document).trigger('orientationchange.simpledialog'); }, _init: function() { this.open(); } }); })( jQuery ); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="index" data-theme="a"> <div data-theme="a" data-role="header"> <h3> First Page </h3> </div> <div data-role="content" data-role="popup"> <a href="#" data-role="button" id="test-button">Test popup</a> <div data-role="popup" id="confirmDialog" style="max-width:400px;" class="ui-corner-all" data-theme="a"> <div data-role="header" class="ui-corner-top"> <h1>Delete Page?</h1> </div> <div data-role="content" class="ui-corner-bottom ui-content"> <form > <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> <h3 class="ui-title">Are you sure you want to delete this page?</h3> <p>This action cannot be undone.</p> <a href="#" data-role="button" data-inline="true" data-rel="back" >Cancel</a> <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" >Delete</a> </div> </form> </div> </div> <div data-role="footer" data-position="fixed"> </div> </div> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery Rqin中的多個彈出窗口 jQuery彈出滾動條 CI：jQuery彈出窗口 多次執行 php 和 jquery 中的彈出窗口 我在哪里存儲jQuery Mobile彈出窗口的div 如何使jQuery Mobile的日期選擇器在字段的中心而不是在左側彈出？ 使用JQuery預覽彈出窗口 jQuery單擊在彈出窗口中不起作用 Internet Explorer上的jQuery彈出菜單 Jquery彈出錯誤消息？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM