CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
alim1990
alim1990

Reputation: 4972

jQuery ui close button is not shown but it works properly

I am using the jQuery-ui dialog and I have added the libraries:

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery-ui.css">

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/tether.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-ui.js"></script>

But when the dialog box appears, you can not see the close button X.

I can see it as this:

enter image description here

And I have these errors at the console:

Failed to load resource: the server responded with a status of 404 (Not Found)

enter image description here

Upvotes: 1

Views: 1927

Answers (4)

Balasubramanian Ramamoorthi
Balasubramanian Ramamoorthi

Reputation: 67

in your project ui-icons images to be placed in images folder under content folder

Upvotes: 0

zer00ne
zer00ne

Reputation: 44108

Errors:

There's 3 pngs that you do not have on your server.

You can point to the pngs at:

CDN

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_444444_256x240.png

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_555555_256x240.png

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_777777_256x240.png

OR

download them and place them on your own server.

In both cases you may have to change the ruleset in either the 1. stylesheet or 2. inline <style> tag on your HTML file:

  1. stylesheet: jquery-ui.css lines. To find those specific lines to edit, go to that error log and click each error. You should be redirected to the browser's view of the CSS file to the exact line that you need to edit.

OR

  1. <style>...</style> within the <head> tag.

Upvotes: 2

ShuBham GuPta
ShuBham GuPta

Reputation: 324

image file is not its original place kindly download required image of plugin and retry below code 

  <link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery-ui.css">

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/tether.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-ui.js"></script>

Upvotes: 1

Nigilan
Nigilan

Reputation: 806

When you download the Jquery UI zip file and unzip it, there is a images folder. Copy and paste in your project folder. Then, it will work flawlessly.

Upvotes: 2

Related Questions