Html:

<div id="dialog" style="display: none" align="center">
    This is a jQuery Dialog.
</div>

js:

jQuery(function ($) {
            $("#dialog").dialog({
                modal: true,
                autoOpen: false,
                title: "jQuery Dialog",
                width: 300,
                height: 150
            });
            $("#btnShow").click(function () {
                 $('#dialog').dialog('open');
             });
        });

wp_endque:

//cdn for model
function addd_file_of_model() {
         wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '1.11.1', true );
    wp_enqueue_script( 'mymodal1', 'https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.js', array( 'jquery' ), '', true );
    wp_enqueue_style( 'mymodal', 'https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/blitzer/jquery-ui.css' );
}
add_action( 'wp_enqueue_scripts', 'addd_file_of_model' );

on This page(https://familymedical.ml/) at sergical icon box I set id=”btnShow”, but on click never popped any model.

js error in console:

[Violation] Forced reflow while executing JavaScript took 33ms
swiper.min.js?ver=5.3.6:13 [Violation] 'setTimeout' handler took 53ms