0

テキストを閉じる代わりに、ダイアログ ボックスの右上隅に x を配置できるようにしたいと考えています。また、このダイアログ ボックスをドラッグできるようにしたいのですが、jquery でこれら 2 つのことを行う方法を教えてください。 

<script type="text/javascript"> 
            jQuery(document).ready( function(){       
                jQuery("#lin").click( showDialog );

                //variable to reference window
                $myWindow = jQuery('#myDiv');

                //instantiate the dialog
                $myWindow.dialog({ height: 600,
                    width: 700,
                    modal: true,
                    draggable: true,
                    position: 'center',
                    autoOpen:false,
                    title:'Hello World',
                    overlay: { opacity: 0.5, background: 'black'}
                    });
                }

            );
        //function to show dialog   
        var showDialog = function() {
            //if the contents have been hidden with css, you need this
            $myWindow.show(); 
            //open the dialog
            $myWindow.dialog("open");
            }

        //function to close dialog, probably called by a button in the dialog
        var closeDialog = function() {
            $myWindow.dialog("close");
        }


    </script>

    </head>

    <body>

    <div id="myDiv">
        <p>this is a test</p>
    </div>
4

1 に答える 1

1

さて、あなたが上で実装したことは、あなたがやろうとしていることに対してかなり複雑に見えます. これは、より基本的な例を示し、あなたがやろうとしていることを満たすように見えるjsFiddleです: http://jsfiddle.net/pgNVa/2/

jQueryUIのドキュメントからコードを直接盗みました

お役に立てれば。

<a href="#" id="lin">Click Me!</a>   
<div id="dialog" title="Basic dialog" style="display:none;">
   <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<script type="text/javascript">
$(function() {
   $("#lin").click(function(){
     $( "#dialog" ).dialog();
   });
});
</script>

</p>

于 2012-11-30T19:27:08.637 に答える