How can I be doing various modals on one page, just pulling another PHP page inside the modal?

Asked

Viewed 451 times

1

I have a code that opens a modal with another PHP page inside the modal, but I could only do this with a page. I would like to do the same thing using this code for the other buttons, only opening other separate pages. Can anyone help me with this.

My code goes below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 20px; /* Location of the box */
        left: 0;
        top: 0;
        padding-left: 300px;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        margin: auto;
        padding: 0;
        width: 80%;
        background-image: url("images/fundo_claro.jpg") ;

        -moz-box-shadow: 1px 1px 30px #000;
        -webkit-box-shadow: 1px 1px 30px #000;
        box-shadow: 1px 1px 30px #000;
        border-radius: 10px;
    }

    /* Add Animation */
    @-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}
    }

    /* The Close Button */
    .close {
        background: #606061;
        color: #009dd9;
        line-height: 25px;
        position: relative;
        right: -12px;
        text-align: center;
        margin-left: 660px;
        top: 23px;
        padding: 5px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;}

    .close:hover {
        background: #00d9ff;
    }
    .modal-header {
        padding: 2px 16px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 5px 0;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);

    }

    .modal-body {
        padding: 2px 16px;
        margin-bottom: 10px;
        padding: 5px 0;
        position: relative;
        }

    .modal-footer {

        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 20px 0;

    }
    .btn {
        display: inline-block;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid ;
        border-radius: 4px;
        height: 50px ;
        font-weight: bold;
        background-color: white;
    }   
</style>
</head>
<body>

<center>
<button id="myBtn" style="cursor: pointer" >Grafico Failure Overall</button><br><br>
<button id="myBtn1"  style="cursor: pointer">Grafico Process Breakdown</button><br><br>
<button id="myBtn2" style="cursor: pointer" >Grafico Commodity Breakdown</button><br><br>
<button id="myBtn3" style="cursor: pointer" >Grafico Workmanship Breakdown</button><br><br>
<button id="myBtn4" style="cursor: pointer" >Grafico Reseat Breakdown</button><br><br>
<button id="myBtn5" style="cursor: pointer" >Grafico Desktop TBG</button><br><br>
<button id="myBtn6" style="cursor: pointer" >Grafico Notebook TBG</button><br><br>
<button id="myBtn7" style="cursor: pointer" >Grafico Ultrabook TBG</button>
</center>


<div id="myModal" class="modal">

    <!-- Modal content -->
    <!-- <div class="modal-content"> -->

        <div class="modal-body">
        <span class="close">X</span><br>
            <?php include "grafico1.php";?>
        </div> 
</div>



<script>
    // Get the modal
    var modal = document.getElementById('myModal');

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

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

    // 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";
        }
    }
</script>


</body>
</html>
php javascript jquery css bootstrap

  • Take a look at this question and it is very likely that one of the answers can help you: http://answall.com/questions/81050/abram-m%C3%Baltiplas-modais-bootstrap

1 answer

1

Opa, tranquil?

Next, the way the code is presented you are inserting the code of graphic1.php in this modal, but php is interpreted when the page is loaded.

It has some solutions for such purpose.

  1. By following your line you can create multiple modes with load of all the php files you want at once, and then hide and display whatever you want.

  2. You can load the php content by ajax for example:

jQuery.ajax({
url: "graphic1.php",
type: "POST",
Success:Function(date){ $('#modal'). html(date); }});

  1. Or iframe which is another possibility but not recommend.

And use Jquery, it is important to use it, besides facilitating it has compatibility and support with multiple browsers

Browser other questions tagged php javascript jquery css bootstrap

You are not signed in. Login or sign up in order to post.