Question

我尝试创建一个单击链接时弹出的模态。我希望背景变得褪色，但似乎整个页面被淡入淡出阻止，这阻止我输入文本字段。这就是它的样子：https://gyazo.com/d87f5beae17209d912169fde18bcdeb9

这是我的代码：

<div class="modal fade" id="new-item-modal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Submit a New Item Ticket</h4>
            </div>
            <div class="modal-body">
                <form id="new-item-form">
                    <div class="form-group">
                        <label for="new-item-name">Item Name</label>
                        <input class="form-control" id="new-item-name" placeholder="item name">
                    </div>
                    <div class="form-group">
                        <label for="new-item-price">Item Price</label>
                        <div class="input-group">
                            <div class="input-group-addon">$</div>
                            <input class="form-control" id="new-item-price" placeholder="item price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="new-item-link">Item Link</label>
                        <input class="form-control" id="new-item-link" placeholder="item link">
                    </div>
                    <input type="submit" value="Submit" class="btn btn-lg btn-success">
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JS：

<script>
$(function () {
    var mAllItems = [];

    $('#search').on('keypress', function (e) {
        if (e.which === 13) {
            var query = this.value;

            var str = '<tr><th>Item Name</th><th>Item Price</th></tr>';

            if (query.length > 0) {
                $.getJSON('php/search-items.php', {query: query}, function (jsonObj) {
                    $('#results').html(str);
                    handleJsonResponse(jsonObj, function (data) {
                        var allItems = data['allItems'];

                        allItems.sort(function (a, b) {
                            var keyA = a['price'], keyB = b['price'];
                            return keyB - keyA;
                        });

                        mAllItems = [];

                        for (var i1 = 0; i1 < allItems.length; i1++) {
                            var item = allItems[i1];

                            var name = item['name'], price = getFormattedPrice(item['price']);

                            mAllItems.push({id: i1, name: name});

                            str += '<tr><td>' + name + '</td><td>' + price + ' <span class="item-price-change-btn" id="' + i1 + '">?</span></td></tr>';
                        }

                        $('#results').html(str);
                        $('.item-price-change-btn').on('click', itemPriceChangeHandler);
                    });
                });
            }
        }
    });

    $('#new-item-form').on('submit', function () {
        var itemName = $('#new-item-name').val(),
            itemPrice = $('#new-item-price').val(),
            itemLink = $('#new-item-link').val();

        if (itemName.length === 0 || itemPrice.length === 0 || itemLink.length === 0) {
            return false;
        }

        $.post('php/new-item-ticket.php', {name: itemName, price: itemPrice, link: itemLink}, function (jsonObj) {
            handleJsonResponse(jsonObj, function (data) {
                var message = data['message'];
                successMsg(message);
                $('#new-item-modal').modal('hide');
            });
        }, 'json');

        return false;
    });

    function itemPriceChangeHandler () {
        var id = parseInt(this.id);

        var item = null;

        for (var i1 = 0; i1 < mAllItems.length; i1++) {
            var i = mAllItems[i1];
            if (i['id'] === id) {
                item = i;
            }
        }

        $('#item-price-change-modal').modal('show');
        $('#item-price-change-name').val(item['name']);
    }

    $('#item-price-change-form').on('submit', function () {
        var name = $('#item-price-change-name').val(),
            price = $('#item-price-change-price').val();

        if (name.length === 0 || price.length === 0) {
            return false;
        }

        $.post('php/item-price-change-ticket.php', {name: name, price: price}, function (jsonObj) {
            handleJsonResponse(jsonObj, function (data) {
                var message = data['message'];
                successMsg(message);
                $('#item-price-change-modal').modal('hide');
            });
        }, 'json');

        return false;
    });
});
</script>

Answer 1

尝试给内部元素提供比外部元素更高的z-index。

Answer 2

尝试申请

pointer-events: none;

到你的叠加层。

黑色模态淡入淡出使我无法在文本字段中输入内容

2 个答案: