Я сейчас борюсь с кодом css.
У меня есть кнопка, которая должна изменить свое содержимое после щелчка (что он и делает) и включить user-select: all после.
Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.modal-body {
background-image:
/* top, transparent red */
linear-gradient(
rgba(1, 104, 31, 0.300),
rgba(156, 15, 15, 0.40)
),
/* your image */
url("https://d1di2lzuh97fh2.cloudfront.net/files/3r/3rz/700/3rzez2.jpg?ph=1be0da70a5");
background-repeat: no-repeat;
background-size: cover;
}
.row {
margin-top: 15px;
}
.promo{
font-size: 1.5em;
color: white;
text-align: center;
line-height: 1em;
}
div.promo{
margin-top: 2em;
}
.subpromo{
font-size: 1em;
color: white;
text-align: center;
line-height: 1em;
margin-bottom: 3em;
}
.percent {
font-size: 4em;
color: white;
text-align: center;
line-height: 1em;
}
button.underline {
text-align: center;
text-decoration: underline;
color: white;
font-size: 0.6em;
}
button.underline:hover{
color: white;
text-decoration: underline;
}
button.underline:focus{
box-shadow: none;
}
/* Button to get the PROMO code */
.btn-one {
transition: all 0.5s;
position: relative;
cursor:pointer;
}
.btn-one span {
transition: all 0.5s;
}
.btn-one::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.5s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
transform: scale(0.1, 0.5);
}
.btn-one:hover span {
letter-spacing: 2px;
}
.btn-one:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.btn-one::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
</style>
</head>
<body>
<!--Modal: modalDiscount-->
<div class="modal fade" id="modalDiscount" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<!--Content-->
<div class="modal-content ">
<!--Body-->
<div class="modal-body">
<div class="container-fluid layer">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<p class="text-left">
<h3 style="color: white;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec.</h3>
<p style= "color: white;">Sed interdum ullamcorper arcu, non mollis augue porttitor sit amet. Pellentesque leo elit, interdum vitae porta at, egestas in urna.</p>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form role="form" class="form">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center">
<div class="btn btn-one">
<span id="promoCode" style="color: white;" >
RECEBA O CÓDIGO
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<button onclick="closeModal()" type="button" class="btn underline">NÃO, OBRIGADO</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 border rounded">
<div class="promo">
<p> RECEBA UM CÓDIGO DE: <span class="percent">10%</span> </p>
<p> DESCONTO </p>
</div>
<div class="subpromo">
<p>CÓDIGO VÁLIDO PARA UMA UTILIZAÇÃO APENAS NA PRIMEIRA COMPRA. OFERTA VÁLIDA EM ARTIGOS SEM PROMOÇÃO</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalDiscount-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load',function(){
$('#modalDiscount').modal('show');
});
</script>
<script>
function closeModal(){
$('#modalDiscount').modal('hide');
}
</script>
<script>
$('.btn-one').one('click', function(){
$(this).fadeOut('slow', function(){
$('#promoCode').text('Stuff to be selected');
$(this).fadeIn('slow');
$(this).css("user-select", "all");
});
})
</script>
</body>
</html>
В настоящее время он не работает, но я сделал несколько тестов, и, по-видимому, если я удалю width: 100%, он действительно сработает, что позволяет мне выбрать текст . Но мне нужно свойство width, так как оно делает некоторую анимацию на кнопке.
Есть предложения / исправления?