4

私はhtml cssで少し助けが必要です。ユーザーがjquery関数を介してログアウトボタンをクリックした後、クラス「main-wrapper」を持つdivのすべてのコンテンツを無効にしたいのですが、2つの方法で試しましたが無駄でした! これが私のjquery関数です。

function loadLogoutBox() {
    $('#logout_box').fadeIn("slow");
    $(".main-wrapper").css({ // this is just for style
            "opacity": "0.3"  
    });
    $(".main-wrapper").disable();
    $(".top-menu").attr('disabled', true);

}

助けてください！

4

8 に答える 8

2

私が正しく理解している場合は、背景が透明で幅と高さが 100% の div を作成し、メイン ラッパーの上とログアウト ボックスの下に表示することができます。

HTML:

<div id="cover"></div>

CSS:

#cover {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1; /* make sure logout_box has a z-index of 2 */
  background-color: none;
  display: none;
}

jQuery:

function loadLogoutBox() {
    $("#cover").css("display", "block");
    $('#logout_box').fadeIn("slow");
    $(".main-wrapper").css({ // this is just for style
            "opacity": "0.3"  
    });
}

この方法では、ユーザーがメイン画面に戻ったときにカバーを取り除くために、明らかに jQuery も追加する必要があります。

これは、次の方法で簡単に実行できます。

$("#cover").css("display", "none");
于 2013-05-20T05:18:41.397 に答える
2

属性は、要素disabledのサブセットとしてのみ適用されます ( 、、およびは、すぐに思いつくことができる唯一のものです)forminputbuttonselecttexarea

$('.main-wrapper').find('input, textarea, button, select').each(function () {
    $(this).prop('disabled', true);
});

divまた、ラッパーの上にオーバーレイを配置して、選択とアンカー タグの使用を防ぐこともできます。HTMLに a を追加してdivから、これを JS と CSS に追加します。

JavaScript

var mainWrapper = $('.main-wrapper')

mainWrapper.find('input, textarea, button, select').each(function () {
    $(this).prop('disabled', true);
});
var mainWrapperPos = mainWrapper.position();
var mainWrapperHeight = mainWrapper.height();
var mainWrapperWidth = mainWrapper.width();

$('#cover').css({
    'opacity':0.3,
    'top': mainWrapperPos.top,
    'left': mainWrapperPos.left,
    'height': mainWrapperHeight,
    'width': $('.main-wrapper').width()
});

CSS

#cover {
    position:absolute;
}

注:タブによる選択を防ぐために、無効化とオーバーレイの両方を繰り返す必要があります。また、<a>アンカー要素を使用hrefして toを設定し#て、タブ付きの使用を防ぐこともできます。

jsフィドル

于 2013-05-20T05:14:55.123 に答える
0

このコードは、クラス main-wrapper を持つ div のすべての入力要素を無効にするためのものです。

     $('.main-wrapper :input').attr('disabled', true);

入力要素と同じように、入力の代わりにタグ名を配置することで、他の要素を無効にすることができます。

      $('.main-wrapper :select').attr('disabled', true);
于 2013-05-20T05:13:40.233 に答える
0

attr( )の代わりにprop()を使用する必要があります

$(".top-menu").attr('disabled', true);

である必要があります。ここでは、、 など.top-menuに適用されると仮定しますinputtextarea

$(".top-menu").prop('disabled', true);

また

$(".top-menu").attr('disabled', 'disabled');
于 2013-05-20T05:14:05.493 に答える
0

HTML が表示されない場合、最も可能性の高い問題は、 $(".main-wrapper") が無効化メソッドを持たないコレクションを返すことです。無効化機能を持つオブジェクトを列挙して見つけ、代わりにそれを呼び出す必要があります。

編集: jquery disable メソッドはありません。要素を非表示にするか、 $object.prop('disabled', true); で無効にする必要があります。

于 2013-05-20T05:07:46.083 に答える
0

アンドリューは正しい.しかし、回避策を提案することができます.div $(".main-wrapper")と同じ高さ、幅、位置で空のdivを非表示にしますが、z-indexは$(". main-wrapper") div.最初は空の div を非表示にし、ユーザーがログアウトをクリックすると空の div が表示され、空の div によってすべてのクリック イベントが受信され、$(".main-wrapper") div が無効に見えます。

于 2013-05-20T05:16:14.180 に答える