2017-06-26 108 views
0

我有以下功能:用户可以创建警报消息并在页面加载时使用它们。我们可以使用id为dx-alert-content的简单文本区编写该消息。在编写消息后,更新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'); 
        } 
       } 
      }); 
     } 

回答

-1

如果任何包装或覆盖在身上的标签添加那么z-index的问题。

你需要使用引导警告框

http://bootboxjs.com/examples.html

+0

你在开玩笑吧? –