Bootstrap Modal Box or Pop Up (On Click)

 <!doctype html>

<html lang="en">


<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"

        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <title>ModalBox</title>

    <style>

        .btn-primary {

            background-color: green;

        }


        label{

            font-weight: bold;

        }

        input{

            padding:2px 10px 2px 10px;

            width: 100%;

        }

        .modal-content{

            background-color: chocolate;

        }

    </style>

</head>


<body>

    <h1 class="text-center" style="background-color: chocolate;">Modal Box Using Bootstrap</h1>

    <!-- Button trigger modal -->

    <div class="text-center mt-4">

        <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">

            Contact Us

        </button>

    </div>


    <!-- Modal -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content text-center mt-5">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">Feel Free To Contact</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    <div>

                        <label for="">Name:</label>

                        <br>

                        <input type="text" placeholder="Name">

                    </div>

                    <div>

                        <label for="">Purpose:</label>

                        <br>

                        <input type="text" placeholder="Purpose">

                    </div>

                    <div>

                        <label for="">Email:</label>

                        <br>

                        <input type="text" placeholder="Email">

                    </div>

                </div>

                <div class="modal-footer">


                    <button type="button" class="btn btn-primary">SEND</button>

                </div>

            </div>

        </div>

    </div>


    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"

        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"

        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"

        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"

        crossorigin="anonymous"></script>

</body>


</html>

Comments

Post a Comment

Popular posts from this blog

Javascript Array Concat and Join Method

  The JavaScript   Array concat()   Method is used to merge two or more arrays together. This method does not alter the original arrays passed as arguments. but instead return new Array. let newArray1 = oldArray.concat() let newArray2 = oldArray.concat(value0) let newArray3 = oldArray.concat(value0,value1) ....... ....... let newArray = oldArray.concat(value1 , [ value2, [ ...,[ valueN]]]) -------------------------------- Description The  join()  method returns an array as a string. The  join()  method does not change the original array. Any separator can be specified. The default is comma (,). <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title >Document</ title > </ head > < body >   ...
Read more

JavaScript While Loop

Image
--------- index.js page let num = 10; while (num >= 10) {   console.log("adisma");   num = num - 1; // num--; } ------------------------------------------------------------------------------------------ default.js page -----------  <script>       let num = 30;       while(num>=1){         document.write(num + ") Adisma <br>")         num = num-1; // num--;       }     </script> -----------------------------------------------
Read more

JavaScript pop() Method

  Definition and Usage The  pop()  method removes (pops)  the last element  of an array. The  pop()  method changes the original array. The  pop()  method returns the removed element. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title >Document</ title > </ head > < body >   < h1 >JavaScript Array pop() Method</ h1 >   < script >     const myNumbers = [ 1 , 4 , 8 , 4 ];         console . log (myNumbers);     console . log (myNumbers . pop ());     console . log (myNumbers);           </ script > </ body > </ html >
Read more