search

outboxcraft / beauter

A simple framework for faster and beautiful responsive sites
https://beauter.io
MIT License
130 stars 15 forks source link

The Model Modal #11

Closed bretonio closed 6 years ago

bretonio commented 7 years ago

I have successfully configured the modal example from your docs and it llooks good.

When I go to ad a second modal — myModal2 let us say — the button that triggers it triggers the first modal instead. The two modals are obaModal and myModal2 ... It looks like this in Pug ...

        button#myBtn2 Abra-me Sésamo

        // The Modal
        #myModal2.modalbox-modal
            // Modal content
            .modalbox-modal-content(style='width: 500px')
                span#modalbox-close2.-close ✖
                h2._alignCenter
                    i.fa.fa-gears.fa-lg
                    |   Engenho Novo LLC
                h4._alignCenter We Grok the Web Worldwide 
                p
                    | Lorem ipsum dolor sit amet et cetera fake Latin
                button.right Fechar

        script.
            // Get the modal
            var modal = document.getElementById('myModal2');
            // Get the button that opens the modal
            var btn = document.getElementById("myBtn2");
            // Get the <span> element that closes the modal
            var span = document.getElementById("modalbox-close2");
            // When the user clicks on 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";
            }
            }

Both buttons open myModal2 in other words.

Hope this is not an annoying noob question. i.fa.fa-heart.fa-4x your boatiful Beauter.

ErikThiart commented 7 years ago

Just to be sure, do you have the same code as above for obaModal?

From the code above it seems to me you only have JS code for myModal2, you will need to do the same for obaModal as well.

bretonio commented 6 years ago

Thanks for reply!

No no I do have JS code for each modal. And each is uniquely designated — I went back and combed each one finely. Trying to trigger each modal with its respective button still opens the same modal.

When I comment out this repeated modal the other modal responds to its button as it should but the third button now also opens this other.

There must be something wrong with my unique designation of each script? I have checked the variables in the script below and they seem defined correctly?

        script.
            var modal = document.getElementById("modal47");
            var btn = document.getElementById("modalButton47");
            var span = document.getElementById("modalbox-close47");
            btn.onclick = function() {
            modal.style.display = "block";
            }
            span.onclick = function() {
            modal.style.display = "none";
            }
            window.onclick = function(event) {
            if (event.target == modal) {
            modal.style.display = "none";
            }
            }

Thank you again.

ramdeoshubham commented 6 years ago

Hello bretonio, Thanks for telling us your issue. Actually in the above code, the modal object which you are using as modal.style.display etc should be different for different modals. For example, one will be called 'modal1.style...' other 'modal2.style...'. And inside the window.onclick function, the event.target == modal, this modal will also be then modal1 and modal2. If I am guessing wrong, below I am writing a sample code which has 2 different modals each having its own triggering button.

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/outboxcraft/beauter/master/beauter.min.css" />
</head>
<body>
<button id="myBtn1">Open Modal 1</button>
<button id="myBtn2">Open Modal 2</button>

<div id="myModal1" class="modalbox-modal">
<div class="modalbox-modal-content">
<span class="-close" id="modalbox-close1">✖</span>
<p>Here lies your modal!</p>
</div>
</div>

<div id="myModal2" class="modalbox-modal">
<div class="modalbox-modal-content">
<span class="-close" id="modalbox-close2">✖</span>
<p>Here lies your second modal!</p>
</div>
</div>

<script>
var modal1 = document.getElementById('myModal1');
var btn1 = document.getElementById("myBtn1");
var span1 = document.getElementById("modalbox-close1");

var modal2 = document.getElementById('myModal2');
var btn2 = document.getElementById("myBtn2");
var span2 = document.getElementById("modalbox-close2");

btn1.onclick = function() {
    modal1.style.display = "block";
}
span1.onclick = function() {
    modal1.style.display = "none";
}

btn2.onclick = function() {
    modal2.style.display = "block";
}
span2.onclick = function() {
    modal2.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
}
</script>
</body>
</html>

New in Beauter 0.3 Beta

Using plain Javascript with beauter was a headache as you can see above. With beauter 0.3, we are working on implementing js functions for easy interaction with the components of beauter.

To make two modals, each having different buttons to trigger, following is the full source with beauter 0.3:

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/outboxcraft/beauter/v0.3-dev/beauter.css" />
</head>
<body>

<button onclick="openmodal('myModal1')">Open Modal1</button>
<button onclick="openmodal('myModal2')">Open Modal2</button>

<div id="myModal1" class="modalbox-modal">
<div class="modalbox-modal-content">
<span class="-close" id="modalbox-close">✖</span>
<p>Here lies your modal!</p>
</div>
</div>

<div id="myModal2" class="modalbox-modal">
<div class="modalbox-modal-content">
<span class="-close" id="modalbox-close">✖</span>
<p>Here lies your other modal!</p>
</div>
</div>

<script src="https://rawgit.com/outboxcraft/beauter/v0.3-dev/beauter.js"></script>
</body>
</html>

Checkout the under construction beta here : https://github.com/outboxcraft/beauter/tree/v0.3-dev

Did I solve your problem? Thank you for contacting :smile:

@ramdeoshubham

bretonio commented 6 years ago

I knew it was about a unique indentifier -- just as you said. Thank you for your kind attention! I willl now litter my pages with opstreporous modals.

cb

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Livre de vírus. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail. <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On Tue, Dec 26, 2017 at 11:09 AM, Shubham Ramdeo notifications@github.com wrote:

Hello bretonio, Thanks for telling us your issue. Actually in the above code, the modal object which you are using as modal.style.display etc should be different for different modals. For example, one will be called 'modal1.style...' other 'modal2.style...'. And inside the window.onclick function, the event.target == modal, this modal will also be then modal1 and modal2. If I am guessing wrong, below I am writing a sample code which has 2 different modals each having its own triggering button.

New in Beauter 0.3 Beta

Using plain Javascript with beauter was a headache as you can see above. With beauter 0.3, we are working on implementing js functions for easy interaction with the components of beauter.

To make two modals, each having different buttons to trigger, following is the full source with beauter 0.3:

Checkout the under construction beta here : https://github.com/ outboxcraft/beauter/blob/v0.3-dev/beauter.js

Did I solve your problem? Thank you for contacting 😄

@ramdeoshubham https://github.com/ramdeoshubham

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/outboxcraft/beauter/issues/11#issuecomment-353967198, or mute the thread https://github.com/notifications/unsubscribe-auth/ATmAqzzw5FYldcxygmcp7Pp-igcFrEdkks5tEPAhgaJpZM4QMwXG .

ramdeoshubham commented 6 years ago

Welcome @bretonio :) We have just released Beauter 0.3 and are working towards better documentation and testing.