Trombone0904
Trombone0904

Reputation: 4268

jQuery dialog will not show the close icon

I embeded a jQuery dialog (https://jqueryui.com/dialog/)

My problem is that the icon "x" will not shown:

enter image description here

But I don't know why. I include the complete code from the example and embedded this into my website. any Ideas, what this can be?

Code

<html lang="de">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
</head>

<body>
    <a href="javascript:openDialog()">Open Dialog</a>
    <div id="dialog-confirm" title="Title" style="display: none;">
        <p>Text</p>
    </div>




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


<script type="text/javascript">
    function openDialog() {
        alert
        $( "#dialog-confirm" ).dialog({
            modal: true,
            buttons: {
            "Close": function() {
              $( this ).dialog( "close" );
            }
          }
        });
    };
</script>




</body></html>

Upvotes: 1

Views: 142

Answers (2)

Trombone0904
Trombone0904

Reputation: 4268

I found the solution. The images were in the folder "images" => wrong. Correct => "css/images"

Upvotes: 1

look that has implemented the jquery, jquery ui well

This is the one in charge of showing the x

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

this is jquery and jquery ui

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Look for styles and routes

Upvotes: 0

Related Questions