Question

我具有以下功能：用户可以创建警报消息并在页面加载时使用它们。我们可以使用id为dx-alert-content的简单textarea编写消息。写完消息后，更新wordpress页面查看页面视图，消息显示正确，但是当我尝试更改消息时，更新更改并刷新页面 - 没有警报窗口。不知道为什么。这是HTML

<div id="dx-alert" title="<?php _e( 'Set Alert', 'dxeasypb' ); ?>">
    <div class="editor-wrapper">
        <textarea name="dx-alert-content" id="dx-alert-content" placeholder="<?php _e( 'Write Alert Message...', 'dxeasypb' ); ?>"></textarea>
    </div>
    <div class="option-wrapper">
        <h4 class="js-option-wrapper-alert option-wrapper-alert"><?php _e( 'Alert Settings', 'dxeasypb' ); ?></h4>
        <div class="option-alert option-wrapper-inner">
            <div>
                <label for="dx-alert-type"><?php _e( 'Select Alert Type', 'dxeasypb' ); ?></label>
                <br>
                <select id="dx-alert-type" name="dx-alert-type">
                    <option value="On Page Load"><?php _e( 'On Page Load', 'dxeasypb' ); ?></option>
                    <option value="On Click"><?php _e( 'On Click', 'dxeasypb' ); ?></option>
                </select>
                <br><br>
                <div class="dx-alert-ids-wrap">
                    <label for="dx-alert-ids"><?php _e( 'Ids of Element', 'dxeasypb' ); ?></label>
                    <input type="text" name="dx-alert-ids" id="dx-alert-ids" placeholder="<?php _e( 'Enter Ids of Element', 'dxeasypb' ); ?>">
                    <br>
                    <p class="dx-dialog-input-description"><?php _e( 'Enter Ids of Element, Each Seperated By Space.', 'dxeasypb' ); ?></p>
                </div>
            </div>
        </div>
    </div>
</div>

和JavaScript：

if(action === 'alert'){
            var parentDiv   = jQuery(this).parents('.dx-columns');

            jQuery('#dx-alert-content').val(parentDiv.find('.hidden').html());
            jQuery('#dx-alert-type').val(parentDiv.attr('data-alert'));
            jQuery('#dx-alert-ids').val(parentDiv.attr('data-alert-ids'));

            if(parentDiv.attr('data-alert')=='On Click'){

                jQuery('.dx-alert-ids-wrap').show();
            }


            if(parentDiv.attr('data-alert') == 'On Page Load') {

                jQuery(' .dx-alert-content').show();

            }

            jQuery(' .dx-alert-content').show();

            jQuery('#dx-alert').dialog({
                  width: 1200,
                  height: 350,
                  close: function( event, ui ) {
                      jQuery( this ).dialog( "destroy" );
                  },
                  buttons: {
                    'Save': function () {

                        var content = jQuery('#dx-alert-content').val();
                        parentDiv.attr('data-alert',jQuery('#dx-alert-type').val());
                        parentDiv.attr('data-alert-ids',jQuery('#dx-alert-ids').val());
                        content = jQuery(content).text().replace( 'script', '' );

                        var check   = parentDiv.find('.hidden').length;

                        if(!check) {
                            parentDiv.append('<div class="hidden">' + content + '</div>');
                        }
                        else{
                            parentDiv.find('.hidden').html(content);
                        }

                        jQuery(this).dialog('destroy');
                    }
                }
            });
        }

Answer 1

如果在body标签中添加了任何包装或覆盖，那么它就是z-index问题。

或

您需要使用引导警报框

http://bootboxjs.com/examples.html

编辑后警报消息消失

1 个答案: