17

JQuery Mobile 1.2.0 alpha 1 を使用しています。

現在、ポップアップを開いて、画面のどこかでその外側をタップすると、ポップアップが閉じられます。見逃したJQuery Mobile属性があり、設定して外部タップ時にポップアップを閉じるのを防ぐことができるかどうか疑問に思っていましたか? (モーダルポップアップ)

(ポップアップのドキュメントはこちらにあります)

編集：

私はこれを解決するアイデアを持っていましたが、まだ実装できません:

JQM ポップアップが表示されると、画面全体を ui-popup-screen のクラスでカバーする div が表示されます。どういうわけか、大きな z-index を与えて、そこからすべてのクリック/タップ機能をバインド解除することを考えました。これを行っても問題は解決しませんが、方向への小さな一歩だと思います。

事前にt​​hnx。

4

5 に答える 5

25

これは、Github の機能要求として追加されました。こちらの問題を参照してください。

当面のハックとして、ui-popup-screen でイベントのバインドを解除します。次のコードを pageinit に入れます。

$("#yourPopupId").on({
    popupbeforeposition: function () {
        $('.ui-popup-screen').off();
    }
});

これは手間のかかるクイックフィックスですが、機能します。

于 2012-09-14T13:42:23.627 に答える
19

将来のサーチャーのために、1.3 以降、これがサポートされるようになりました。data-dismissible="false"属性をパネル div に追加するだけです。

于 2013-09-24T16:01:11.657 に答える
4

@TheGwa の優れたソリューションに基づいて、次の公式機能 (おそらくバージョン 1.3) に備えるための一般化を次に示します。

  • data-dismissible='false'閉じたくないすべてのポップアップのマークアップに、それらの外側をタップして追加します。

  • 次のイベント ハンドラーをアプリに追加します。すべてのポップアップを処理します。

_

$(window).on('popupbeforeposition', 'div:jqmData(role="popup")', function() {
        var notDismissible = $(this).jqmData('dismissible') === false;
        if (notDismissible) {
          $('.ui-popup-screen').off();
        }
});

-

機能が正式にサポートされたら、イベント ハンドラーを削除するだけです。

残念ながら、公式ドキュメント (1.2 時点) では、この機能が既に利用可能であることが示されていますが、まだ利用可能ではないことに注意してください - http://jquerymobile.com/test/docs/pages/popup/options.htmlを参照してください

于 2013-01-19T02:33:36.893 に答える
0

@ MJB -> ポップアップがアクティブなときに任意の場所 (ボタンなど) をクリックできるようにしたい場合は、次のようにポップアップの CSS を変更できます。

.ui-popup-screen{
                    position: relative;
                }

これは私にとってはうまくいきました。

注：これを行うと、クリックしてもポップアップが閉じなくなりました-回避策を作成しました：

$(window).click(function() {    
    if ($( "#myPopup-popup" ).hasClass("ui-popup-active")){
        $( "#myPopup" ).popup( "close" );
    }
});

myPopup-popup ID は JQM によって生成されます。myPopup は、ポップアップに付けた ID です。

于 2014-10-16T14:18:52.510 に答える
0

次のように data-dismissible="false" を追加します。

<div data-role="popup" id="popupnotification" data-overlay-theme="b" data-theme="c"  data-position-to="window" style="max-width:600px;">
于 2014-09-12T10:58:26.567 に答える