2

カラーボックス プラグインに基づいて単純なポップアップを作成/テストしたいと考えています。jquery、colorbox、colorbox.cssだけの余分なcssのない単純な可能なhtmlページがありますが、ポップアップが正しく表示されない理由がわかりません。ここのページを試すことができますhttp://goo.gl/VWQRC

[ログインの問題] をクリックした後ですか? リンク私はクロムでこれを取得しています ここに画像の説明を入力

ここに私のjsコードがあります

$(document).ready(function() {
    // Using a jQuery object:
    var $p = $("#reset-popup");
    $("#problem-link").colorbox({inline:true, href:$p});

});

私が間違っていることは何ですか？

4

3 に答える 3

1

次のように colorboxwidthオプションを指定してみてください。

$(document).ready(function() {
    // Using a jQuery object:
    var $p = $("#reset-popup");
    $("#problem-link").colorbox({
          inline: true, 
          width: "50%",
          href: $p
    });
});

たとえば、このマークアップにはインライン呼び出し用の隠しコンテンツ (#reset-popup) が含まれています。

<div style='display:none'>
    <div id='reset-popup' style='padding:10px; background:#fff;'>
         <p><strong>This content comes from a hidden element on this page.</strong></p>                     
    </div>
</div>

デモ: http://jsfiddle.net/WGTVY/

于 2012-11-06T11:58:26.820 に答える
1

jquery v1.4.2 を使用していることがわかりました。それはカラーボックスと互換性がありません。jquery.com (v1.8.2) の最新のものを使用しました。現在は正常に動作しています。設定でポップアップの幅を設定する必要はありません。

于 2012-11-06T12:58:08.897 に答える
1

別の colorbox.css (または別のバージョンの colorbox) を使用してみてください。あなたのものは、別のバージョンまたは何のためのもののようです。chridamの例 (v1.3.16 以降) で使用されているスタイルと JS を使用してみてください。

また、スタイルとの共通点はありませんが、これhref:$pは間違ったコードのようです。実際には、colorbox はクリックされたリンクの href を取得し、#reset-popupそれを使用して見つける必要があるため、まったく必要ありません。また、リンク/セレクターを使用した文字列ではなく、jquery でラップされた div オブジェクトへのリンクを提供しています。

テスト ページからわかるように、 の幅はと の幅と同じですが、 と#cboxContentの#cboxTopCenterスペースを残すためにそれよりも小さくする必要があります。これらの 3 つの要素の幅をより小さなものに変更すると、ほぼ正しいカラーボックスが得られます。私にとっては、そのバージョンのカラーボックスではいくつかの異なるスタイルが期待されているようです。#cboxBottomCenter#cboxWrapper#cboxMiddleLeft#cboxMiddleRight

于 2012-11-06T12:33:15.013 に答える