将x放在jquery中关闭对话框

时间:2012-11-30 19:09:19

标签: jquery dialog

我希望能够将x放在对话框的右上角而不是关闭文本。另外,我喜欢拖动这个对话框,你能帮助如何在jquery中做这两件事吗?

<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>

1 个答案:

答案 0 :(得分:1)

嗯,你上面所实现的内容看起来非常复杂。这是一个jsFiddle,它显示了一个更基本的例子,似乎满足了你想要做的事情:http://jsfiddle.net/pgNVa/2/

我几乎直接从jQueryUI docs

中窃取了代码

希望这有帮助。

<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>