Question

我有2个按钮，当你点击按钮时，会弹出一个<div>，就像弹出框一样。

我设法得到第一个弹出<div>名为bigbox的按钮但是当我尝试点击第二个按钮时，它不会弹出另一个名为editbox的<div>。

但是当我删除控制第一个按钮的jquery函数时，它可以工作。

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

    <style type="text/css">


        .bigbox  {
            background-color: #F5E49C;
            color: #000;
            padding: 0 5px;
            width:280px;
            text-align: center;content: "";display: none;
            padding-bottom: 30px;
            padding-top: 10px;
        }

        .editbox  {
            background-color: #F5E49C;
            color: #000;
            padding: 0 5px;
            width:280px;
            height:500px;
            text-align: center;content: "";
            display: block;
            padding-bottom: 70px;
            padding-top: 10px;
            position: absolute;left:300px;top:1px;
        }


    </style>
</head>
<body>
    <button id="ClickMe">Click Me</button>
    <div id="moveableBox" data-display="hidden" class="bigbox">
    </div>
    <br>
    <button id="Click">Second pop box</button>
    <div id="ableBox" data-display="hidden" class="editbox">
    </div>
    <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>
</body>
</html>

Answer 1

首先，浏览器控制台中出现错误

Uncaught TypeError: Object [object Object] has no method 'draggable'

因此，您还必须导入jquery-ui以使JS执行到最后，或者只是删除可拖动的方法。

其次，你在#ableBox上调用一个切换功能，因为它最初是可见的，因此会消失。

Jquery popbox冲突

1 个答案: