Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

code 

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="utf-8">
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            /* padding-top: 20px; */
            left: 35%;
            top: 25%;
            width: 30%;
            /* Full width */
            height: 40%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background: #f5f5f5;
            border-radius: 15px;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
        }
        
        .modal-content {
            margin: auto;
            width: 80%;
        }
        
        .close {
            position: absolute;
            color: #aaaaaa;
            float: right;
            right: 10px;
            top: 5px;
            font-size: 22px;
            font-weight: bold;
        }
        
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        
        .btn {
            position: relative;
            display: inline-block;
            margin-right: 20px;
        }
        
        .btn button {
            width: 70px;
            height: 35px;
            border: none;
            border-radius: 15px;
            background: #26d9c9;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
        }
        
        #myInput_3 {
            width: 200px;
            height: 35px;
            text-align: center;
            border-radius: 15px;
            font-size: 18px;
            margin-right: 20px;
            background-color: #fff !important;
            box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
        }
        
        .btn_2 {
            display: block;
            position: absolute;
            margin: auto;
            align-content: center;
            align-items: center;
            left: 130px;
            top: 75%;
        }
        
        .btn_2>a>button {
            width: 160px;
            height: 40px;
            border: none;
            border-radius: 15px;
            background-color: #fff;
            color: #26d9c9;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
            font-size: 17px;
        }
        
        .btn_2>a>button:hover {
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
        }
        
        #myBtn_3 {
            width: 130px;
            height: 40px;
            border: none;
            border-radius: 15px;
            background-color: #fff;
            color: #26d9c9;
            font-size: 17px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
        }
        
        #myBtn_3:hover {
            color: #11546B;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
            transition: color 0.3s ease-in-out;
        }
        
        .modalHead {
            position: relative;
            top: 0;
            margin-top: 0;
            width: 100%;
            height: 90px;
            margin-bottom: 10px;
            background-color: #fff;
            /*  */
            overflow-x: hidden;
        }
        
        .modalHead p {
            color: #474747;
            margin-right: 35px;
            margin-top: 5px;
            font-size: 18px;
            font-weight: 700px;
        }
        
        .modalHead span {
            margin-right: 35px;
            font-size: 13px;
            background-color: turquoise;
            color: #fff;
            padding: 3px;
            border-radius: 5px;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>

    <button id="myBtn_3">مشاهده</button>
    <div id="myModal_3" class="modal">
        <div class="modalHead">
            <p>30% تخفیف بازرگام</p>
            <span>فعلا معتبر</span>
        </div>
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <input type="text" value="asal" id="myInput_3" readonly>

            <div class="btn">
                <button onclick="myFunction_3()"  id="btn_3">
      کپی
      </button>
            </div>
        </div>
        <!-- <p style="margin-right: 100px;color:#474747;">بدون نیاز به وارد کردن کد</p> -->
        <div class="btn_2">
            <a href="#" ><button>
      لینک خرید
        </button></a>
        </div>
    </div>

    <script>
        // Get the modal
        var modal = document.getElementById("myModal_3");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn_3");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[2];

        // When the user clicks the button, open the modal
        btn.onclick = function() {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        function myFunction_3() {
            var copyText = document.getElementById("myInput_3");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            document.execCommand("copy");

            var btn = document.getElementById("btn_3");
            btn.innerHTML = "کپی شد ";
        }
    </script>

</body>

</html>