How to open modal window when clicking a WP menu link?

admin管理员组

文章数量:1130349

I'm making my first site with WP, I'm a Joomla Developper. I'm using wisten theme, and WP 3.9.2

I want to create a link in my the navigation that opens a modal window (not a new page) on click. Example - , when you click the LOGIN link I have no clue of how I should do this in WordPress.

The Jquery code for such an operation is not very difficult, the code is here :

/

but I have no clue of how to integrate it.

Any help would be appreciated

I'm making my first site with WP, I'm a Joomla Developper. I'm using wisten theme, and WP 3.9.2

I want to create a link in my the navigation that opens a modal window (not a new page) on click. Example - http://kendo.mx , when you click the LOGIN link I have no clue of how I should do this in WordPress.

The Jquery code for such an operation is not very difficult, the code is here :

http://jsfiddle/mmetsalu/hBX6E/2/

but I have no clue of how to integrate it.

Any help would be appreciated

• menus

Share Improve this question edited Aug 18, 2014 at 23:53 Ray Mitchell 9191111 silver badges2929 bronze badges asked Aug 18, 2014 at 21:30 Juliatzin del ToroJuliatzin del Toro 14711 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Using bootstrap's modal you could use this hook in your function.php file top do that:

add_filter( 'nav_menu_link_attributes', 'menu_atts', 10, 3 );
function menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 24;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#IDofModal';
  }
  return $atts;
}

I'm making my first site with WP, I'm a Joomla Developper. I'm using wisten theme, and WP 3.9.2

I want to create a link in my the navigation that opens a modal window (not a new page) on click. Example - , when you click the LOGIN link I have no clue of how I should do this in WordPress.

The Jquery code for such an operation is not very difficult, the code is here :

/

but I have no clue of how to integrate it.

Any help would be appreciated

I'm making my first site with WP, I'm a Joomla Developper. I'm using wisten theme, and WP 3.9.2

I want to create a link in my the navigation that opens a modal window (not a new page) on click. Example - http://kendo.mx , when you click the LOGIN link I have no clue of how I should do this in WordPress.

The Jquery code for such an operation is not very difficult, the code is here :

http://jsfiddle/mmetsalu/hBX6E/2/

but I have no clue of how to integrate it.

Any help would be appreciated

• menus

Share Improve this question edited Aug 18, 2014 at 23:53 Ray Mitchell 9191111 silver badges2929 bronze badges asked Aug 18, 2014 at 21:30 Juliatzin del ToroJuliatzin del Toro 14711 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Using bootstrap's modal you could use this hook in your function.php file top do that:

add_filter( 'nav_menu_link_attributes', 'menu_atts', 10, 3 );
function menu_atts( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 24;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-toggle'] = 'modal';
    $atts['data-target'] = '#IDofModal';
  }
  return $atts;
}

本文标签： How to open modal window when clicking a WP menu link