Question

我今天写的是关于我编码的一个通知系统遇到的问题。在下面的图像的背景是我嵌入的Flash文件游戏文件，我编写了一个Web套接字服务器，它将来自同一个C＃服务器的通知发送到javascript客户端代码并发送通知。

预览图片：https://i.stack.imgur.com/QQqxo.png

正如您从上面所看到的，我已经高举了我的一个通知，问题是有时闪存文件中的某些元素，以及您在我的某个通知上看到关闭按钮的内容是无法点击的覆盖关闭按钮的其中一个div除了按钮右侧的一小部分是可点击的。

我会帮你完成我的设置..

使用Javascript：

var ws = new WebSocket('ws://localhost:8181/');

var hasConnected = false;

function startWebSockets() {
    ws.onmessage = function (messageEvent) {
        onReceiveMessage(messageEvent.data);
    };

    ws.onopen = function () {
        onConnectionOpened();
    };

    ws.onclose = function () {
        onConnectionClosed();
    }
}

function onReceiveMessage(messageData) {
    var messageParts = messageData.includes('\\') ? messageData.split('\\') : messageData;

    if (messageData.includes("\\")) {
        if (messageParts[0] == "compose:show_custom_notification") {
            showBootstrapNotification(messageParts[1], messageParts[2], messageParts[3], messageParts[4]);   
        }
    }   
    else {
        if (messageData == "compose:authentication_complete") {
            console.log('Authentication to WebSocket server has been completed.');
        }

        if (messageData == "compose:authentication_failed") {
            sendMessage("client_identity_token " + habboSso);
        }
    }
}

function onConnectionOpened() {
    console.log('Connected to the WebSocket server.');
    hasConnected = true;

    sendMessage("client_identity_token " + habboSso);
}

function onConnectionClosed() {
    if (!hasConnected) {
        console.log('Failed to connect to the WebSocket server.');
    } 
    else {
        console.log('Your connection to the WebSocket server was unexpectedly closed.');
    }
}

function sendMessage(message) {
    if (hasConnected) {
        ws.send(message);
    }
}

startWebSockets();

function showBootstrapNotification(notificationTitle, notificationContent, notificationColor, notificationSize) {
    console.log('trying to execute notification');

    var notificationArea = $('#notification_area');
    var notificationHtml = '';
    notificationHtml += '<div class="col-md-' + notificationSize + ' absolute-center">';
    notificationHtml += '<div class="draggable panel panel-pink">';
    notificationHtml += '<div class="panel-heading" style="background-color: ' + notificationColor + '">';
    notificationHtml += notificationTitle;
    notificationHtml += '</div>';
    notificationHtml += '<div class="panel-body">';
    notificationHtml += notificationContent;
    notificationHtml += '</div>';
    notificationHtml += '</div>';
    notificationHtml += '</div>';

    const newNot = $(notificationHtml);
    notificationArea.prepend(newNot);
    newNot.draggable();
}

这是我存储通知div的地方：

<div id="notification_area">
    <br><br>
    <!-- Notificiations will automatically be added here. -->
</div>

如果您阅读showBootstrapNotification函数，它会在div中添加notification_area

我想我要问的是，我怎么能阻止div不被忽视？当通知远小于其占用的大小时，为什么它占用了这么多空间？这与col-md有关吗？任何帮助表示赞赏。

Answer 1

无法帮助js，但你试图给通知面板一个更高的z-index，只是为了强迫它在所有东西之上？

.notification-area {
z-index: 100;
}

Answer 2

在bootstrap中，col-md-1占据屏幕宽度的1/12，col-md-2占2/12，col-md-3占3/12，依此类推。至于使某个div始终可以点击，请尝试在CSS中为该div添加一个高z-index。

.div-to-click{
   z-index: 5;
}

CSS Div涵盖了其背后的其他div

2 个答案: