Nếu bạn muốn tạo một trang web giới thiệu các gói khuyến mãi di động. Người dùng truy cập trang, kích hoạt ngay gói khuyến mãi với vài cái nhấp trên màn hình di động. Thật là hấp dẫn và tiện dụng cho người dùng phải không các bạn?
Hình trên có thể là một ví dụ minh họa, người dùng chỉ cần bấm vào nút Đăng Ký, trên điện thoại đã được soạn sẵn nội dung như sau:
1. Tạo giao diện người dùng
Tôi tạo ta một giao diện đơn giản như bên dưới. Bây giờ mời bạn nhấn thử vào nút Đăng Ký xem thế nào nhé.
Và đây là đoạn code để tạo giao diện như trên:
<div class="row-kh">
<div class="kichhoat">
<ul>
<li class="name"><a class="chitiet details boxname" href="/goi-cuoc-xl90u-viettel/">XL90U</a></li>
<li class="number"><span><span class="big">9GB</span>tốc độ cao</span></li>
<li class="price">90.000đ/30 ngày</li>
</ul>
<a class="chitiet details box-inline" href="javascript:void(0);">Chi Tiết <i class="fa fa-share"></i></a>
<a class="dangky signup box-inline" onclick="smsbutton('9123','XL90U 0986080055')">Đăng Ký <i class="fa fa-location-arrow"></i></a>
</div>
</div>
Lưu ý là nút Đăng Ký chỉ hoạt động trên giao diện điện thoại. Phần mẫu tin khuyến mãi trên được tạo bởi đoạn CSS sau:
<style>
.row-kh{
width: 100%;
}
.kichhoat {
-webkit-box-shadow: 0px 1px 15px 0px rgb(50 50 50 / 40%);
-moz-box-shadow: 0px 1px 15px 0px rgba(50, 50, 50, 0.4);
box-shadow: 0px 1px 15px 0px rgb(50 50 50 / 40%);
margin: 5px auto;
border-radius: 20px;
background: #fff;
padding: 10px;
text-align: center;
position: relative;
width: 35%;
}
.kichhoat ul {
margin-bottom: 10px;
}
.kichhoat .details {
width: 90px;
display: block;
padding: 3px 10px 1px;
text-align: center;
background-color: #fff;
border: 1px solid;
font-size: 12px;
border-radius: 10px;
margin: auto;
line-height: 17px;
margin-bottom: 10px;
border-color: #00918d;
}
.box-inline {
width: 110px !important;
display: inline-block !important;
padding: 10px !important;
font-size: 15px !important;
border-radius: 20px !important;
margin-left: 5px !important;
}
.kichhoat a.signup, .kichhoat .signup {
width: 75%;
cursor: pointer;
display: block;
line-height: normal;
padding: 10px;
text-align: center;
color: #fff;
margin: 0 auto;
border: 0px;
font-size: 15px;
border-radius: 20px;
margin-bottom: 10px;
-webkit-box-shadow: 0px 1px 10px 0px rgb(50 50 50 / 50%);
-moz-box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 1px 10px 0px rgb(50 50 50 / 50%);
}
.dangky {
background-color: #00918d;
}
.kichhoat ul li {
list-style-type: none;
color: #000;
position: relative;
padding: 5px 0px;
}
.kichhoat ul li.price {
color: #d58530;
}
.kichhoat ul li:before {
display:none;
}
</style>
2. Xây hàm tạo sms body với JavaScript
<script> function smsbutton(num,cont) { var userAgent = navigator.userAgent || navigator.vendor || window.opera; if (/android/i.test(userAgent)) { var txtcont = "sms:"+num+"?body="+cont $("a.dangky").attr("href", "sms:"+num+"?body="+cont); } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { $("a.dangky").attr("href", "sms:"+num+"&body="+cont); }}</script>