How to insert a div in a WordPress theme?

Question

WordPress

Good day everyone!
Can you please tell me how can I insert a div into a WordPress theme?
I want to add a modal window that will appear on click and hide on click on the cross. I did this 1 million times on ordinary self-written sites, but not WordPress.
Also, I would like this div, as well as styles and scripts, not to be overwritten when updating the theme.
Theme: Futurio

Answer 1

So that the files are not overwritten during the update, you need to create a child theme
. In functions.php , you need to add the connection of scripts and styles on the wp_enqueue_scripts hook like this:

add_action( 'wp_enqueue_scripts', 'custom_scripts' );
function custom_scripts() {

  // Сюда стили
  wp_enqueue_style( 'newstyle', get_template_directory_uri() . '/assets/css/custom_style.min.css' );

  // Сюда скрипты
  wp_enqueue_script( 'newscript', get_template_directory_uri() . '/assets/js/custom_script.min.js' );

  // сюда инициализацию или отдельным файлом как выше
  $newscript_init = 'jQuery(function($) {

  });';
  wp_add_inline_script( 'newscript', $newscript_init );

}

The form output can be added to the wp_footer hook like so:

add_action( 'wp_footer', 'the_popup_form', 1 );
function the_popup_form() { ?>

  <div id="popup" class="mfp-hide popup">
    <form id="popup-form" class="popup-form">

      <!-- ... -->

    </form>
  </div>

<?php }