jQuery弹出框问题_Jquery_Css - Fatal编程技术网

jQuery弹出框问题

jquery css

jQuery弹出框问题,jquery,css,Jquery,Css,我有一个包含按钮的模板。单击此按钮时，将出现一个弹出框我面临的问题是：我找不到办法将按钮和弹出框移到中间，然后接近代码。如果我在弹出框上单击“关闭”，弹出框将关闭这里是JSFIDLE：有人能帮帮我吗 <html> <head> <title>Page</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

我有一个包含按钮的模板。单击此按钮时，将出现一个弹出框

我面临的问题是：我找不到办法将按钮和弹出框移到中间，然后接近代码。如果我在弹出框上单击“关闭”，弹出框将关闭

这里是JSFIDLE：有人能帮帮我吗

<html>
<head>
    <title>Page</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>

    <style type="text/css">


    .Richard  {
    display: none;
    background-color: #FF58C3;
    color: #000;
    padding: 0 5px;
    width:500px;
    height:500px;
}



</style>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#ClickMe").click(function(e) {
            e.preventDefault();
            /*if (.attr("data-display") == "visible") {

            };*/
            $("#moveableBox").fadeToggle();
        });
        $( "#moveableBox" ).draggable({ handle: "#moveBox" });
    });
</script>

</head>
<body>

<button id="ClickMe">Click Me</button>

<div id="moveableBox" data-display="hidden" class="Richard">
<div id="moveBox">a</div>
</div>


页
理查德先生{
显示：无；
背景色：#FF58C3；
颜色：#000；
填充：0 5px；
宽度：500px；
高度：500px；
}
jQuery（文档）.ready（函数（$）{
$（“#单击我”）。单击（函数（e）{
e、 预防默认值（）；
/*如果（.attr（“数据显示”）=“可见”）{
};*/
$（“#moveableBox”）.fadeToggle（）；
});
$（“#moveableBox”）.draggable（{handle:#moveBox}）；
});
点击我
A.

这就是你要找的吗？添加

页边距：自动

到

.Box

CSS

有趣的是，您如何调用

的“moveBox”

实际上是一个包含文本的元素

close

，但是您希望它以任何方式拖动

都可以：）很棒的南瓜谢谢您，但是如果您单击close，您知道如何关闭popbox吗？南瓜如何删除按钮？$（“#moveBox”）。单击（function（）{$（this.parent（）.hide（）}）；