2017-06-26 137 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

你在開玩笑吧? –