Create Popup for existing button-CodePudding

edit: i cant edit the original code, since the button and its function is provided by a plugin. If could find the initial JS for the function of the button, i would hide the first one and recreate / modify it myself if thats somehow possible..

I have a button which is already styled and running a javascript function (cant find the code for it).

Is it possible to create a popup for that existing button?

Found this tutorial on how to create a popup on W3

<div  onclick="myFunction()">Click me to toggle the popup!
  <span  id="myPopup">A Simple Popup!</span>
</div>


<style>

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}



.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; }

span#myPopup.popuptext.show {
    visibility: visible;

}

</style>


<script>


// When the user clicks the div, open the popup
function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
}

</script>

but cant make it work for an existing button.

All info i have for that button:

<button type="button"  data-overwrite-fields="1"><i ></i> Submit</button>

(the i class is an svg image)

Is it possible to create a popup for that button or should i move on?

CodePudding user response：

You could try wrapping the button in a div with an onclick for the div, in which you preventDefault(), then show your popup, and use JS or jQuery to "click" the button you can't modify.

Something like this:

<div onclick="yourOwnFunction">
    <button id="buttonId"></button> <!-- Button you can't change -->
</div>

Then:

function yourOwnFunction(event){
  showPopup();
  event.preventDefault();
}

Note, this assumes that you don't want the button's function to execute before your popup is displayed. If this is the case, once the user does what is needed on your popup, you can then "fire" the button's function with something like this:

function whatHappensWhenModalIsClosed(){
  document.getElementById("buttonId").click();
}

CodePudding user response：

Notes

There are a lack of details in the question that make this a bit tricky. Because the <button> in question does not have an id set and there appears to be other buttons with potentially the same class, a lot of assumptions have to be made.

Ideally if we know the parent element, we can use that as a selector first to narrow the results, then attempt to select our button. Also, if any siblings or nearby elements have an id set, we could use things like nextElementSibling() or the closest() methods to grab this specific button.

Solution

The approach however is to grab all of the potential buttons and loop through them. From there, I am checking to make sure the data-overwrite-fields attribute is equal to 1 and that the text within the button is equal to submit (forced to lower case). Without more information from OP I cannot guarantee these criteria will limit the result to only 1 button, but this should be a useful start for OP to translate into a solution.

The next steps are to copy the button, add a new event listener (as well as the popup element) and then replace the old button with the newly created one.

const _ReplaceButton = () => {
  document.querySelectorAll("button.class.class2.class3").forEach(b => {
    // Because we do not know if there are other buttons with this class,
    // we must try to narrow it down
    if(b.dataset.overwriteFields != "1" || b.innerText.trim().toLowerCase() != "submit") return
    
    // Copy the button and create the popup element
    let newButton = b.cloneNode(true),
    popup = document.createElement("div")

    // Set the event listener for the new button
    newButton.addEventListener("click", myFunction)

    // Set the class and content for the popup
    popup.className = "popup w3-text-blue"
    popup.innerHTML = `<span  id="newPopup">New Button!</span>`

    // Replace the old button
    b.replaceWith(newButton, popup)
  })
}

function myFunction() {
  document.getElementById('newPopup').classList.toggle('show');
}

.popup {
  position: relative;
  display: inline-block;
  height: 1.2em;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0;
  margin-left: -108px;
}
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

span.popuptext.show {
  visibility: visible;
}

<p>This is just example text used to fill this element. This text has no meaning and only serves as placeholder content.</p>

<button type="button" ><i ></i> Button 1</button>
<button type="button"  data-overwrite-fields="1"><i ></i> Submit</button>

<p>This is just example text used to fill this element. This text has no meaning and only serves as placeholder content.</p>

<button type="button"  onclick="_ReplaceButton()">Swap Button</button>

Initially the button will do nothing (it likely has an event listener already attached to it, which is irrelevant here as that is removed when the element is cloned). After clicking Swap Button, the old button is removed and the new one runs myFunction() and displays the popup.