使用jquery,ajax为div创建关闭按钮并关闭div而不刷新页面

时间:2018-05-17 12:50:15

标签: javascript jquery html ajax wordpress

我创建了一个带有关闭按钮的div,用于弹出cookie显示。 Cookie创建工作完美。但是一旦我点击关闭按钮,div就会关闭并刷新页面。然后再次显示关闭div。  这是我创建cookie的代码,我使用ajax来创建cookie。这是一个wordpress网站 如果有人可以帮我添加关闭按钮来关闭弹出窗口而不刷新网页。提前致谢。

的JavaScript 这是在custom.js文件

// ========================= Ajax for Set cookie =======================
$(document).ready(function(){
    jQuery('#cookie_btn').click(function(e){
        e.preventDefault();
      var data = {
        type:'json',
        action: 'setCookiePopup'
           }; 
       jQuery.post(ajax_url.ajaxurl, data, function(response) { 
          var res = jQuery.parseJSON(response);
          if (res.result) {
            $('#cookie_modal_body').remove();
            // $('#cookie_modal_body').slideToggle();
          }
         });
     });
});


// ===============Add close button to cookie div==================
$(document).ready(function(){
    $('#close_img_btn_anchor').click(function(e){
            $('#cookie_modal_body').hide();
    });
});

这是在functions.php文件

//======================== Set Cookie ===================================
function setCookiePopup() {

    $cookie_name = "Newcookie";
    $cookie_value = "coojieValue";
    setcookie($cookie_name, $cookie_value, time() + 3600, "/");

    echo json_encode(array('result' => 'true'));
    die();
}

add_action('wp_ajax_setCookiePopup', 'setCookiePopup');
add_action('wp_ajax_nopriv_setCookiePopup', 'setCookiePopup');


//=================  Short Code to set cookie pop-up =====================

add_shortcode('setCookiePopupShortCode','setCookiePopupShortCode');


function setCookiePopupShortCode(){
    $cookie_name = "Newcookie";
    var_dump($cookie_name);

     if(!isset($_COOKIE[$cookie_name])) {

        $popup  = '<div class="" id="cookie_modal_body">';  
        $popup .= '<p id="cookie_text_custom">We use cookies to track usage and preferences. </p>';
        // $popup .= '<p id="cookie_links_custom"> <a id="cookie_policy_link" href="'.site_url().'/cookie-policy.html" target="_blank">Read our cookie policy </a> or <a id="cookie_btn" href="#"> close  <b class="close_img" id="close_img_btn">X</b> </a> </p>'; 

        $popup .= '<p id="cookie_links_custom"><a id="cookie_btn" href="#"> Accept </a> or  <a id="cookie_policy_link" href="'.site_url().'/cookie-policy.html" target="_blank">Read our cookie policy </a></p>';

        $popup .= '<button class="close_img" id="close_img_btn"><a href="" id="close_img_btn_anchor">X</a></button>';                        
        $popup .= '</div>'; 

        echo $popup;
    }
}

0 个答案:

没有答案