Как добавить кнопочку закрытия(Х) на див блок?

Question

[squirtazzer]

https://nashvybor27.ru/ внизу голубая кнопочка(принять участие в выставке). Как добавить кнопочку чтобы скрывать этот див блок?

Comments

[ой всё]

что вам мешает открыть код страницы и посмотреть как там сделано?

как реклама, так прикручена к глупому вопросу

[squirtazzer]

ой всё, какой код страницы?это мой сайт и я его делаю. Я не могу добавить кнопку закрытия. Не знаю как это сделать,потому и спрашиваю

[ой всё]

squirtazzer, найдите пример с кнопкой и посмотрите

Answer 1

[artyomunder]

Продублирую и тут

squirtazzer, подключите библиотеку, если её нет
CSS:

.backform {
    width: 290px;
    height: 70px;
    background-color: #00a7eb;
    border-radius: 0px;
    position: fixed;
    top: 93vh;
    right: 80px;
    z-index: 999;
}
.backform-item {
	position: fixed;
  	top:90vh;
	right:30px;
	z-index: 999;
    text-align: center;
}

HTML

<div class="backform-item">
	<div class="backform">
		<a class="popmake-2884 pum-trigger" style="color: rgb(255, 255, 255); cursor: pointer;" href="#"><br>
Принять участие в выставке ярмарке</a>
	</div>
	<div id="clear_1" class="delete"/>x</div>
</div>

JS

$('.delete').click(function(){
    $(this).prev().remove();
    $(this).remove();
});

Comments

[squirtazzer]

js это куда вставлять?

[artyomunder]

перед /body

[squirtazzer]

artyomunder, https://hkar.ru/S4U0 правильно?

[artyomunder]

squirtazzer, перед закрывающимся

[squirtazzer]

artyomunder, вот так ?

https://hkar.ru/S4Uf

получилось вот так

https://hkar.ru/S4Ug

[artyomunder]

squirtazzer, во-первых, все это дело нужно обернуть в

<script>
$('.delete').click(function(){
    $(this).prev().remove();
    $(this).remove();
});
</script>

Перед закрывающимся тегом </body>

[squirtazzer]

artyomunder, https://hkar.ru/S4Uu

я вношу в header.php ...

я неправильно делаю?

>






<?php $allowed_html_array = wp_kses_allowed_html( 'post' )?>
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) {?> <?php };?>
<?php if(get_theme_mod('pheromone_logo_favicon_iphone', 'enable')) : ?><?php endif; ?>
<?php if(get_theme_mod('pheromone_logo_favicon_ipad', 'enable')) : ?><?php endif; ?>
<?php wp_head(); ?>


>

<?php if(get_theme_mod('pheromone_preloader','enable') == true) { ?><?php }; ?>

<?php if(get_theme_mod('pheromone_scroll_up','enable') == true) { ?><?php }; ?>


<?php get_template_part( 'framework/content/menu'); ?>


<?php if(!is_page_template( array('homepage.php', 'coming-soon.php'))) {?>
<?php if(!is_search()) {?>
<?php if(!is_404()) {?>
<?php if(!is_single()) {?>
<?php if(!class_exists( 'WooCommerce' ) || !is_woocommerce()) {?>

<?php $post = get_post($id); $image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'wall-portfolio-squre'); ?>

<?php if (has_post_thumbnail()) { ?>



<?php } else {?>



<?php };?>





<?php if (is_page()){ ?>

<?php the_title() ?>

<?php } elseif (is_front_page()) { ?>

<?php esc_html_e('Blog', 'pheromone') ?>

<?php } elseif (pheromone_is_blog()) { if(is_archive()){ ?>

<?php single_cat_title() ?>

<?php };};?>

<?php pheromone_breadcrumbs(); ?>

<?php
global $post;
$id = 'featured_image_full';
if(get_post_meta( $post->ID, $id, true )){echo ''; }
?>




<?php };?>
<?php };?>
<?php };?>
<?php } else { ?>
<?php if(get_theme_mod('pheromone_search_image', 'enable')) {?>

<?php } else { ?>

<?php } ?>





<?php printf( wp_kses( __('Search Results: %s', 'pheromone'), $allowed_html_array ), get_search_query() ); ?>






<?php };?>
<?php };?>
<?php if (class_exists( 'WooCommerce' )) { ?>
<?php if (is_woocommerce()) { ?>
<?php if(get_theme_mod('pheromone_woo_image', 'enable')) {?>

<?php } else { ?>

<?php } ?>



<?php woocommerce_page_title() ?>
<?php woocommerce_breadcrumb() ?>





<?php };?>
<?php };?>

[artyomunder]

squirtazzer, footer.php вам нужен

[squirtazzer]

artyomunder, <?php get_template_part( 'framework/content/footer');?>

[artyomunder]

squirtazzer, вот в нем ищите тег </body> и перед ним вставьте то, что я вам скинул

[squirtazzer]

artyomunder, УБРАЛ СО СТАРОГО МЕСТА ВСТАВИЛ В ФУТЕР

<?php get_template_part( 'framework/content/footer');?>

[squirtazzer]

squirtazzer,

<?php get_template_part( 'framework/content/footer');?>

[squirtazzer]

artyomunder,

<?php get_template_part( 'framework/content/footer');?>
</div> </div>
<div class="backform-item">
  <div class="backform">
    <a class="popmake-2884 pum-trigger" style="color: rgb(255, 255, 255); cursor: pointer;" href="#"><br>
Принять участие в выставке ярмарке</a>
  </div>
  <div id="clear_1" class="delete"/>X</div>
</div>
<?php wp_footer(); ?><script>
$('.delete').click(function(){
    $(this).prev().remove();
    $(this).remove();
});
</script>
</body>
</html>

не работает

[squirtazzer]

artyomunder, и как сделать чтобы крестик был ПОВЕРХ голубой кнопки:?рапсоложение я сделал а как сделать чтобы она была поверх кнопочки?

[artyomunder]

squirtazzer, стилями, дядь. Все работает, если не правильно устанавливаете, то наймите фрилансера, который сделает рублей за 200-500 все шикарно

[squirtazzer]

artyomunder, хорошо хер с ней с кнопочкой поверх.но кнопка закрытия не работает((( расположил туда, дядь куда сказано было.НЕ РАБОТАЕТ

[artyomunder]

squirtazzer, Смотрим и понимаем, что работает.

[squirtazzer]

artyomunder, Почему же у меня не работает.Я внес все куда вы сказали...

[artyomunder]

squirtazzer, у вас их на странице аж 4 штуки. Удалите все, кроме той, что идет перед

[squirtazzer]

artyomunder, Удалил оставил только тут

<?php get_template_part( 'framework/content/footer');?>
</div> </div>

<div class="backform-item">
  <div class="backform">
    <a class="popmake-2884 pum-trigger" style="color: rgb(255, 255, 255); cursor: pointer;" href="#"><br>
Принять участие в выставке ярмарке</a>
  </div>
  <div id="clear_1" class="delete"/>X</div>
</div>
<?php wp_footer(); ?>
<script>
$('.delete').click(function(){
    $(this).prev().remove();
    $(this).remove();
});
</script>
</body>
</html>

тоже самое

[artyomunder]

Это

<script type='text/javascript' src='https://nashvybor27.ru/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

Замените на это

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>

[squirtazzer]

artyomunder, ну наконец то.спасибо большое

[artyomunder]

squirtazzer, пожалуйста