Fatal编程技术网
  • jquery/
  • 在jquery中放置x以关闭对话框

在jquery中放置x以关闭对话框

jquery

在jquery中放置x以关闭对话框,jquery,dialog,Jquery,Dialog,我希望能够将x放置在对话框的右上角，而不是关闭文本。另外，我希望能够拖动这个对话框，您能帮助我如何在jquery中完成这两件事吗 <script type="text/javascript"> jQuery(document).ready( function(){ jQuery("#lin").click( showDialog ); //variable to referenc

我希望能够将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>


jQuery（文档）.ready（函数（）{
jQuery（“#lin”）。单击（showDialog）；
//变量到引用窗口
$myWindow=jQuery（'#myDiv'）；
//实例化对话框
$myWindow.dialog（{高度：600，
宽度：700，
莫代尔：是的，
真的，
位置：'中间'，
自动打开：错误，
标题：“你好，世界”，
覆盖：{不透明度：0.5，背景：“黑色”}
});
}
);
//用于显示对话框的函数
var showDialog=函数（）{
//如果内容是用css隐藏的，你需要这个
$myWindow.show（）；
//打开对话框
$myWindow.dialog（“打开”）；
}
//函数关闭对话框，可能由对话框中的按钮调用
var closeDialog=函数（）{
$myWindow.dialog（“关闭”）；
}
这是一个测试
好吧，您上面所实现的对于您正在尝试做的事情来说看起来相当复杂。下面是一个JSFIDLE，它显示了一个更基本的示例，似乎满足了您的要求：

我几乎是直接从计算机上偷了代码

希望这有帮助

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


这是用于显示信息的默认对话框。可以使用“x”图标移动、调整和关闭对话框窗口

$（函数（）{
$（“#lin”）。单击（函数（）{
$（“#dialog”）.dialog（）；
});
});
​

您使用jQueryUI进行此对话框吗？@ReLeaf，是的，我使用的是jQueryUII，我没有得到x标题的背景颜色。你有与之配套的css吗？是的，它加载了默认的jQueryUI css，你可以在我链接到的fiddle中的参考资料中看到。查看我链接到的文档以了解完整的示例。如果对你有效，请告诉我。这太棒了。很抱歉拖到这里，但是我丢失了x的图像。你知道它叫什么吗？当你下载基本的jQueryUI库时，你会得到它们提供的每个实现的CSS、JS和图像。这些图像是一个精灵，将在包中。如果我答对了，别忘了把上面的答案标为正确答案我知道我已经接受了你有效的答案。我只有一个简单的问题。我想更改对话框标题部分的默认颜色。它现在是橙色的。有什么办法吗？