web-dev-qa-db-ja.com

jQueryUIモーダルダイアログに閉じるボタンが表示されない（x）

ASP .NET MVC 3アプリケーションでjQueryモーダルダイアログを使用しています。右上隅に閉じるボタンが表示されていないことを除いて、正常に機能します。これを追加するにはどうすればよいですか？

$("#dialog-modal").dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
jqueryasp.net-mvc-3jquery-uidialog
66
Antarr Byrd

ダイアログの右上隅で、ボタンshouldがある場所にマウスを置き、何らかの効果が得られるかどうかを確認します（ボタンがホバーします）。クリックして、閉じるかどうかを確認してください。閉じた場合、パッケージのダウンロードに付属しているイメージスプライトが欠落しています。

39
PriorityMark

別の可能性は、bootstrapライブラリーがあることです。 bootstrapおよびjquery-uiの一部のバージョンは.button（）メソッドと競合します。bootstrap.jsをjquery-ui.jsの後に配置すると、bootstrap .button（ ）jqueryボタンをオーバーライドすると、jquery-ui 'X'イメージは表示されません。

こちらをご覧ください： https://github.com/twbs/bootstrap/issues/6094

これは動作します（クローズボックスが表示されます）：

<script src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

これが問題の原因です。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
185
mekane84

私はこの問題を抱えていて、以下の宣言でそれを解決することができました。

$.fn.bootstrapBtn = $.fn.button.noConflict();
38
Yure Kesley

純粋なCSS回避策：

bootstrapとjQuery UIの両方を使用していて、スクリプトを追加する順序を変更すると、他のオブジェクトが破損しました。私は純粋なCSSの回避策を使用することになりました：

.ui-dialog-titlebar-close {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
  border: medium none;
}
.ui-dialog-titlebar-close:hover {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
}
18
Binod

Opはjquery uiとbootstrapを一緒に使用していることを明示的に示していませんが、使用すると同じ問題が発生します。この問題を解決するには、jquery ui（js）の前にbootstrap（js）をロードします。ただし、ボタンの状態の色に問題が発生します。

最後の解決策は、bootstrapまたはjquery uiのいずれかを使用することですが、両方は使用しません。ただし、回避策は次のとおりです。

    $('<div>dialog content</div>').dialog({
        title: 'Title',
        open: function(){
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
        }
    });
12
dhollenbeck

Jquery-ui.cssの閉じるボタンの画像パスを確認するだけです。

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url**(../img/ui-icons_222222_256x240.png)**/*{iconsContent}*/; 
}
.ui-widget-content .ui-icon {
    background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsContent}*/; 
}
.ui-widget-header .ui-icon {
    background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsHeader}*/; 
}
.ui-state-default .ui-icon { 
    background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; 
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsHover}*/; 
}
.ui-state-active .ui-icon {
    background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsActive}*/; 
}

icons_222222_256x240.pngおよびui-icons_454545_256x240.pngのパスを修正します

5
Lakshmi

アイデアの原則を使用して、user2620505はaddClassの実装で結果を得ました。

...
open: function(){
    $('.ui-dialog-titlebar-close').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only');
    $('.ui-dialog-titlebar-close').append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
}, 
...

英語が許せない場合は、Google翻訳を使用しています。

5
davidsonsns

問題は、ブラウザーがXアイコンを含むjQueryUIイメージSpriteをロードできなかったためだと思います。 Fiddler、Firebug、またはブラウザーがサーバーに対して行うHTTP要求へのアクセスを提供できる他のいくつかを使用し、イメージSpriteが正常にロードされることを確認してください。

4
epignosisx

私は同じ問題を抱えていて、この関数を開いているダイアログオプションに追加するだけで効果がありました

open: function(){
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
        },

そして、近いイベントでは、それを削除する必要があります

close: function () {
            var closeBtn = $('.ui-dialog-titlebar-close');
            closeBtn.html('');}

完全な例

<div id="deleteDialog" title="Confirm Delete">
 Can you confirm you want to delete this event?
</div> 

$("#deleteDialog").dialog({
                width: 400, height: 200,
                modal: true,
                open: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
                },
                close: function () {
                    var closeBtn = $('.ui-dialog-titlebar-close');
                    closeBtn.html('');
                },
                buttons: {
                    "Confirm": function () {
                        calendar.fullCalendar('removeEvents', event._id);
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#dialog").dialog("open");
4
David Fawzy

コード内の他のJSライブラリとの競合があると思います。閉じるボタンを強制的に表示してみてください：

...
open:function () {
  $(".ui-dialog-titlebar-close").show();
} 
...

これは私のために働いた。

3
Adrian P.

ここに素晴らしい答えがあります https://stackoverflow.com/a/31045175/3778527 私はテストされています：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
2
Vaflan

CSSをリンクするだけでうまくいきました。私のプロジェクトから完全に欠落している可能性があります：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
1
fregas

「OK」の前後に引用符を追加する必要があります。それがボタンのテキストです。現状では、ボタンのテキストは、その変数の値を解決しようとしているため、現在空です（したがって表示されません）。

モーダルダイアログは、[ok]または[キャンセル]ボタンを押す以外の方法で閉じることを意図したものではありません。右隅に[x]が必要な場合は、modal：falseを設定するか、完全に削除します。

0
Affable Geek

同様の問題がありました。私はjqueryとjquery-uiを使用していました。バージョンをアップグレードすると、ダイアログを閉じるイメージが表示されなくなりました。私の問題は、ダウンロードしたjsパッケージを解凍したときに、ディレクトリに実行権限がないことでした。

そのため、簡単なchmod + x dir-name、およびサブフォルダー用にトリックを行いました。 Linuxでの実行許可がないと、Apacheはフォルダーにアクセスできません。

0
user1269942

解決策は、モーダル内を閉じることができます

this の簡単な例を見てください

0
zero7