TRIK DAN TEKNIK: 11/02/16

Samle POPUP Modal

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Modal Popup using JavaScript </title>
<style>
/* mPopup box style */
.mpopup {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.mpopup-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

.mpopup-head {
padding: 2px 16px;
background-color: #ff0000;
color: white;
}
.mpopup-main {padding: 2px 16px;}
.mpopup-foot {
padding: 2px 16px;
background-color: #ff0000;
color: #ffffff;
}

/* add animation effects */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* close button style */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>

<h2>Simple Modal Popup using JavaScript and CSS</h2>


<a href="javascript:void(0);" id="mpopupLink">Open Popup</a>


<div id="mpopupBox" class="mpopup">

<div class="mpopup-content">
<div class="mpopup-head">
<span class="close">×</span>
<h2>Simple Modal Popup</h2>
</div>
<div class="mpopup-main">
<p>This is a simple modal popup using JavaScript and CSS</p>
<p>Please the content...</p>
</div>
<div class="mpopup-foot">
<p>created by CodexWorld</p>
</div>
</div>
</div>

<script>
// get the mPopup
var mpopup = document.getElementById('mpopupBox');

// get the link that opens the mPopup
var mpLink = document.getElementById("mpopupLink");

// get the close action element
var close = document.getElementsByClassName("close")[0];

// open the mPopup once the link is clicked
mpLink.onclick = function() {
mpopup.style.display = "block";
}

// close the mPopup once close element is clicked
close.onclick = function() {
mpopup.style.display = "none";
}

// close the mPopup when user clicks outside of the box
window.onclick = function(event) {
if (event.target == mpopup) {
mpopup.style.display = "none";
}
}
</script>

</body>
</html>

Display Loading On Oopen page php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Loading Image While Page Loads using jQuery</title>
<style>
p{font-size: 40px;}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>
</head>
<body>
<div class="loader"></div>
<h2> </h2>
</body>
</html>

Sample Beautifull Send Mail PHP

<?php
$to = 'user@example.com';$subject = "Beautiful HTML Email using PHP by CodexWorld";
$htmlContent = '
    <html>
    <head>
        <title>Welcome to CodexWorld</title>
    </head>
    <body>
        <h1>Thanks you for joining with us!</h1>
        <table cellspacing="0" style="border: 2px dashed #FB4314; width: 300px; height: 200px;">
            <tr>
                <th>Name:</th><td>CodexWorld</td>
            </tr>
            <tr style="background-color: #e0e0e0;">
                <th>Email:</th><td>contact@codexworld.com</td>
            </tr>
            <tr>
                <th>Website:</th><td><a href="http://www.codexworld.com">www.codexworld.com</a></td>
            </tr>
        </table>
    </body>
    </html>';
// Set content-type header for sending HTML email$headers = "MIME-Version: 1.0" . "\r\n";$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// Additional headers$headers .= 'From: CodexWorld<sender@example.com>' . "\r\n";$headers .= 'Cc: welcome@example.com' . "\r\n";$headers .= 'Bcc: welcome2@example.com' . "\r\n";
// Send emailif(mail($to,$subject,$htmlContent,$headers)):
    $successMsg = 'Email has sent successfully.';
else:
    $errorMsg = 'Email sending fail.';
endif;?>

TRIK DAN TEKNIK

Wednesday, November 2, 2016

Samle POPUP Modal

Display Loading On Oopen page php

Sample Beautifull Send Mail PHP

phprunner view custom filed status