jQuery UI Dialog - ไม่มีไอคอนปิด

ฉันใช้ชุดรูปแบบ jQuery 1.10.3 ที่กำหนดเอง ฉันดาวน์โหลดทุกอย่างจากธีมโรลเลอร์และฉันไม่มีเจตนาเปลี่ยนแปลงอะไรเลย

ฉันสร้างกล่องโต้ตอบและได้สี่เหลี่ยมสีเทาที่มีไอคอนปิด:

ฉันเปรียบเทียบโค้ดที่สร้างบนหน้าของฉัน:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

ไปยังรหัสที่สร้างขึ้นในหน้าการสาธิตการโต้ตอบ :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

แก้ไข: ส่วนต่าง ๆ ของรหัสถูกสร้างขึ้นโดย jQueryUI ไม่ใช่ฉันดังนั้นฉันไม่สามารถเพิ่มแท็กการขยายโดยไม่ต้องแก้ไขไฟล์ jqueryui js ซึ่งดูเหมือนว่าจะเป็นตัวเลือกที่ไม่ดี / ไม่จำเป็นเพื่อให้สามารถใช้งานได้ตามปกติ

นี่คือจาวาสคริปต์ที่ใช้ในการสร้างส่วนนั้นของรหัส:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

ฉันสูญเสียและต้องการความช่วยเหลือ ขอบคุณล่วงหน้า.

ฉันมาสายนี้ซักพัก แต่ฉันจะระเบิดความคิดของคุณพร้อมหรือยัง?

เหตุผลนี้เกิดขึ้นเนื่องจากคุณกำลังเรียก bootstrap ในหลังจากที่คุณโทร jquery-ui

ให้สลับทั้งสองเพื่อแทนที่:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

มันกลายเป็น

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

แก้ไข - 26/06/2015 - สิ่งนี้ดึงดูดความสนใจหลายเดือนต่อมาดังนั้นฉันคิดว่ามันคุ้มค่าที่จะแก้ไข จริง ๆ แล้วฉันชอบโซลูชัน noConflict ที่เสนอในความคิดเห็นภายใต้คำตอบนี้และชี้แจงโดยผู้ใช้ Pretty Cool เป็นคำตอบแยกต่างหาก ในขณะที่บางคนได้รายงานปัญหากับคำแนะนำเครื่องมือ bootstrap เมื่อมีการสลับสคริปต์ ฉันไม่พบปัญหานั้นเพราะฉันดาวน์โหลด jquery UI โดยไม่ต้องใช้คำแนะนำเครื่องมือเนื่องจากฉันไม่ต้องการใช้เพราะ bootstrap ดังนั้นปัญหานี้ไม่เคยเกิดขึ้นกับฉัน

แก้ไข - 22/07/2015 - อย่าสับสนjquery-uiกับjquery! ในขณะที่ JavaScript ของ Bootstrap ต้องการให้โหลด jQuery มาก่อนก็ไม่ต้องพึ่งพา jQuery-UI ดังนั้นjquery-ui.jsสามารถโหลดได้bootstrap.min.jsในขณะที่jquery.jsจะต้องโหลดก่อน Bootstrap เสมอ

นี่คือความคิดเห็นเกี่ยวกับคำตอบยอดนิยม แต่ฉันรู้สึกว่ามันคุ้มค่ากับคำตอบของตัวเองเพราะมันช่วยให้ฉันตอบปัญหาได้

หากคุณต้องการให้ Bootstrap ประกาศหลังจาก JQuery UI (ฉันทำเพราะฉันต้องการใช้คำแนะนำเครื่องมือ Bootstrap) การประกาศต่อไปนี้ (ฉันประกาศหลังจาก$(document).ready) จะอนุญาตให้ปุ่มปรากฏขึ้นอีกครั้ง (คำตอบจากhttps://stackoverflow.com/ a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

สิ่งนี้ดูเหมือนจะเป็นบั๊กในวิธีที่ jQuery จัดส่ง คุณสามารถแก้ไขได้ด้วยตนเองด้วยการจัดการ dom บางอย่างในDialog Openเหตุการณ์:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});

มีรายงานว่าใช้งานไม่ได้ใน 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

ฟิลลิปเมื่อวันที่ 29 มกราคม 2013 เวลา 7:36 น. กล่าวว่า: ในเวอร์ชัน CDN ปุ่มปิดกล่องโต้ตอบจะหายไป มีเพียงแท็กปุ่มเท่านั้น span ui-icon คือ missong

ฉันดาวน์โหลดรุ่นก่อนหน้าและ X สำหรับปุ่มปิดจะแสดงการสำรองข้อมูล

ฉันพบการแก้ไขสามประการ:

1. คุณสามารถโหลดรองเท้าบูทก่อนได้ และพวกเขาโหลด jquery-ui แต่มันไม่ใช่ความคิดที่ดี เพราะคุณจะเห็นข้อผิดพลาดในคอนโซล

2. นี้:

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;

   จะช่วยให้ แต่ปุ่มอื่น ๆ ดูน่ากลัว และตอนนี้เราไม่มีปุ่ม bootstrap

3. ฉันแค่ต้องการใช้สไตล์ bootsrap และฉันต้องการมีปุ่มปิดพร้อมไอคอน ฉันได้ทำสิ่งต่อไปนี้แล้ว:

   ปุ่มปิดดูแลการแก้ไขอย่างไร

   .ui-dialog-titlebar-close {
       padding:0 !important;
   }
   
   .ui-dialog-titlebar-close:after {
       content: '';
       width: 20px;
       height: 20px;
       display: inline-block;
       /* Change path to image*/
       background-image: url(themes/base/images/ui-icons_777777_256x240.png);
       background-position: -96px -128px;
       background-repeat: no-repeat;
   }

ฉันมีปัญหาที่แน่นอนเหมือนกันบางทีคุณอาจแก้ไขปัญหานี้แล้ว แต่ได้รับการแก้ไขโดยการวางโฟลเดอร์ "images" ในตำแหน่งเดียวกับ jquery-ui.css

ฉันติดอยู่กับปัญหาเดียวกันและหลังจากอ่านแล้วลองทำตามคำแนะนำทั้งหมดข้างต้นฉันเพียงแค่พยายามแทนที่ภาพนี้ด้วยตนเอง (ซึ่งคุณสามารถหาได้ที่นี่ ) ใน CSS หลังจากดาวน์โหลดและบันทึกไว้ในโฟลเดอร์ภาพในแอพและvoilá แก้ไขปัญหา!

นี่คือ CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

ฉันใช้ jQuery UI 1.8.17 และฉันมีปัญหาเดียวกันนี้บวกกับฉันมีสไตล์ชีต css เพิ่มเติมที่นำไปใช้กับสิ่งต่าง ๆ บนหน้ารวมถึงสีแถบหัวเรื่อง ดังนั้นเพื่อหลีกเลี่ยงปัญหาอื่น ๆ ฉันได้กำหนดเป้าหมายองค์ประกอบ UI ที่แน่นอนโดยใช้รหัสด้านล่าง:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

จากนั้นฉันก็เพิ่มปุ่มปิดในคุณสมบัติของกล่องโต้ตอบ: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

ด้วยเหตุผลบางอย่างฉันต้องกำหนดเป้าหมายทั้งสองรายการ แต่ใช้งานได้!

ฉันรู้ว่าคำถามนี้เก่า แต่ฉันเพิ่งมีปัญหานี้กับ jquery-ui v1.12.0

คำตอบสั้น ให้แน่ใจว่าคุณมีโฟลเดอร์ที่เรียกว่าImagesในสถานที่เดียวกันjquery-ui.min.cssที่คุณมี โฟลเดอร์รูปภาพต้องมีภาพที่พบพร้อมดาวน์โหลด jquery-ui ใหม่

คำตอบที่ยาว

ปัญหาของฉันคือฉันใช้อึกเพื่อรวมไฟล์ css ทั้งหมดของฉันเป็นไฟล์เดียว jquery-ui.min.cssเมื่อฉันทำอย่างนั้นฉันเปลี่ยนสถานที่ตั้งของ รหัส css สำหรับไดอะล็อกคาดว่าโฟลเดอร์ที่เรียกว่าImagesในไดเรกทอรีเดียวกันและภายในโฟลเดอร์นี้คาดว่าไอคอนเริ่มต้น เนื่องจากอึกไม่ได้คัดลอกภาพไปยังปลายทางใหม่มันจึงไม่แสดงไอคอน x

นี่คือวิธีที่ฉันขยายวิธีการเปิดตามคำแนะนำของ @ john-macintyre:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

หากคุณเรียกใช้ไดอะล็อก () ภายในฟังก์ชั่น js คุณสามารถใช้รหัสความขัดแย้งของปุ่มบูตด้านล่าง

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

ปราชญ์ช่วยเหลือฉันครั้งหนึ่ง

ในโฟลเดอร์ที่jquery-ui.cssตั้งอยู่ให้สร้างโฟลเดอร์ชื่อ "images" และคัดลอกไฟล์ด้านล่างลงไป:

UI-icons_444444_256x240.png

UI-icons_555555_256x240.png

UI-icons_777620_256x240.png

UI-icons_777777_256x240.png

UI-icons_cc0000_256x240.png

UI-icons_ffffff_256x240.png

และไอคอนปิดจะปรากฏขึ้น

เพียงเพิ่มที่ขาดหายไป:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

ฉันมีปัญหานี้เช่นกัน นี่คือรหัสที่จะถูกแทรกสำหรับปุ่มปิด:

เมื่อฉันปิด the style = "display: none:" ที่ปุ่มปุ่มปิดจะปรากฏขึ้น ดังนั้นด้วยเหตุผลบางอย่างที่แสดง: ไม่มี; กำลังได้รับการตั้งค่าและฉันไม่เห็นวิธีการควบคุม วิธีอื่นในการจัดการปัญหานี้อาจเป็นการแทนที่การแสดงผล: ไม่มี ไม่เห็นว่าจะทำอย่างไร

ฉันทราบว่าคำตอบที่โพสต์โดย KyleMit ทำงานได้ แต่สร้างปุ่ม X ที่แตกต่างออกไป

ฉันยังทราบว่าปัญหานี้ไม่ได้ส่งผลกระทบต่อการโต้ตอบทั้งหมดในหน้าของฉัน แต่เพียงบางส่วนเท่านั้น บางกล่องโต้ตอบทำงานตามที่คาดไว้ อื่น ๆ ไม่มีชื่อ (เช่นช่วงที่มีชื่อว่างเปล่า) ในขณะที่ปุ่มปิดอยู่

ฉันคิดว่าบางสิ่งผิดปกติอย่างจริงจังและอาจไม่ใช่เวลาสำหรับ 1.10.x

แต่หลังจากการทำงานเพิ่มเติมฉันค้นพบว่าในบางกรณีชื่อเรื่องไม่ได้รับการตั้งค่าอย่างถูกต้องและหลังจากแก้ไขแล้วปุ่ม X close ก็ปรากฏขึ้นอีกครั้งตามที่ควรจะเป็น

ฉันเคยตั้งชื่อดังนี้:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

รหัสนั้นไม่มีอยู่ในรหัสของฉัน แต่ถูกสร้างขึ้นโดย jquery จาก ac-popup และ ui-dialog-title ชนิดของกากตะกอน แต่อย่างที่ฉันบอกว่ามันใช้งานไม่ได้อีกต่อไปและฉันต้องใช้สิ่งต่อไปนี้แทน:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

หลังจากทำอย่างนั้นปัญหาปุ่มที่หายไปดูเหมือนว่าจะดีขึ้นแม้ว่าฉันจะไม่แน่ใจว่ามันเกี่ยวข้องกันหรือไม่

แม้การโหลด bootstrap หลังจาก jquery-ui ฉันก็สามารถแก้ไขโดยใช้สิ่งนี้:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}