jQuery-added（モーダルウィンドウの使用後に通常は隠されています）

Question

私が間違った用語を使用している場合は、前もって謝罪しています。

私はレスポンシブデザインのサイトで作業しています。小さな画面サイズでは、メニューはjQuery/CSSによって選択ドロップダウンに置き換えられます。 （私は、CSSメディアクエリを経由して小さい解像度でそれを表示し、CSSを経由してdisplay:noneにそれをデフォルトで、jQueryの経由<select>フィールドを追加します。）

それはすべてが素晴らしい作品が、自動的大きな表示another jQuery plugin I'm runningとの競合があるようですモーダルウィンドウ内の画像のバージョン。このページを参照し、最初の画像をクリックして、<select>がメニューの下に表示されていることに気づきます。 http://preview.saratogaresources.com/corporate-governance/

これは私がドロップダウンを作成するために使用するコードです：

// Create the dropdown base 
$("<select />").appendTo(".nav"); 

// Create default option "Go to..." 
$("<option />", { 
    "selected": "selected", 
    "value" : "", 
    "text" : "Go to..." 
}).appendTo(".nav select"); 

// Populate dropdown with menu items 
$(".nav a").each(function() { 
var el = $(this); 
$("<option />", { 
    "value" : el.attr("href"), 
    "text" : el.text() 
}).appendTo(".nav select"); 
}); 

$(".nav select").change(function() { 
    window.location = $(this).find("option:selected").val(); 
}); 

これは私のデフォルトCSSです：

.nav select { 
display:none; 

}

そして、これが私のメディアクエリです：

@media all and (max-width: 800px) { 

.nav .menu-top-menu-container { 
    display:none; 
} 

.nav select { 
    display:block; 
    font-size:1em; 
    margin:1em auto; 
} 
} 

ライトボックスプラグインは、私が実行しているほとんどのサイトでうまく動作しますので、問題になっているのは自分のコードだと思っていますが、jQueryはよくわかりません。どんなアイデアでも大歓迎です、ありがとうございます！

Answer 1

私は[EDIT]

jQuery(window).load(function($) 

代わりの

jQuery(document).ready(function($) 

以内に私のjQueryを実行することで、これを固定：実は、私は上記の最終的な解決策だったとは思わない 。何が起こったのかは、jQuery自体（最新バージョン1.7.2）では、<select>フィールドのスタイルが、モーダルウィンドウが閉じた後に""（空白、inline-blockに変換される）に設定されていたと思います。私が正しく理解していれば、これはIEの以前のバージョンではあまりにも高いz-indexを持つ<select>の問題のための「修正」であり、モーダルウィンドウを通して表示されます。 jQueryはモーダルウィンドウ表示のためにそれらをdisplay:noneに設定し、ウィンドウが閉じた後にそれらをリセットします。

しかし私の場合、これは以前に隠された<select>要素にdisplay: inline-blockを追加した結果でした。私は!important宣言をCSSに追加してこれを修正しました。display：setが設定されていました。すごい！