How to make alert onclick function with dialog in script to reuse alert container for other dialog-CodePudding

I want to be able to use the same alert container for different dialogs. I have this currently which works but I would like to see it show up in a boostrap alert - styled rather than the regular popup.

Here is my alert container:

<div class="alert alert-warning" role="alert" id="dialog">            
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

And here is my JavaScript:

 $(document).on("click", "#TypedName", function () {
    alert("By typing your name in the signature box, you are certifying that you are the authorized representative who completed the application and the information provided is accurate to the best of your knowledge.");
});

I would then have other alerts with dialog show up in the same container.

Like this:

if (!document.getElementById("AcceptTerms").checked) {
      e.preventDefault();
      $("#AcceptTerms").focus();
      alert("You must accept terms and conditions in order to proceed to the next step.", "error");
}

I have looked but all I am able to find is examples of a button opening an alert with the text already in the container.

Maybe be another function that does this? So it would be something like this:

application.Alert("Custom Message!"); Also would like to add some html to the string. For <p> and <br />

Thanks for your help!

UPDATE: Here is what I was looking for, Maybe a function that allows this type of behavior.

    $(document).on("click", "#TypedName", function () {
    appFunc.Alert("By typing your name in the signature box, you are certifying that you are the authorized representative who <br> <div class='text-center'>completed the application and the information provided is accurate to the best of your knowledge.</div>", "warning");
});

So appFunction would be a function that allows a dialog popup maybe just using this:

<span id="popupNotification"></span>

UPDATE: I found something that will work the way I want it too, However it is done with KENDO. Is there a way to use Jquery and do this?

var appFunc = {
Alert: function (content, _mode, appendTo, _autoHideAfter) {

    var mode = (_mode !== undefined) ? _mode : "error";
    var autoHideAfter = (_autoHideAfter !== undefined) ? _autoHideAfter : 10000;

    if (GlobalVariables.NotificationWindow === null) {
        GlobalVariables.NotificationWindow = $("#popupNotification").kendoNotification({
            position: { pinned: true, top: 30, right: 30 },
            autoHideAfter: autoHideAfter,
            stacking: "down",
            appendTo: appendTo,
            button: true,
            show: function (e) {
                if (!appendTo) {
                    if (!$("."   e.sender._guid)[1]) {
                        var element = e.element.parent(),
                            eWidth = element.width(),
                            eHeight = element.height(),
                            wWidth = $(window).width(),
                            wHeight = $(window).height(),
                            newTop, newLeft;

                        newLeft = Math.floor(wWidth / 2 - eWidth / 2);
                        if (newLeft < 0) {
                            newLeft = 0;
                        }
                        newTop = Math.floor(wHeight / 3 - eHeight / 3);

                        e.element.parent().css({ top: newTop, left: newLeft });
                    }
                }
            }
        }).data("kendoNotification");
    }

    GlobalVariables.NotificationWindow.show(content, mode);
}
};

UPDATE: Using the example that was given this is one of the popups, but for some reason it turns the whole screen black with the message in the middel - top..

    $(document).on("click", "#TypedName", function () {
    showAlert("By typing your name in the signature box, you are certifying that you are the authorized representative who completed the application and the information provided is accurate to the best of your knowledge.");
});

CodePudding user response：

just as @Purtan stated in the comment section. the alert() is a browser built-in whereas the alert in your HTML code is bootstrap class which has other different classes like alert-success, alert-info, and so on. but to achieve what you want to do, what you need is a javascript code that does the DOM manipulation for you and since you have JQuery added already, this makes life easier.

<div class="alert-wrapper">     
  <div class="alert alert-warning" role="alert" id="dialog">            
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
  </div>
</div>

<div style="display:none" class="success">     
  <div class="alert alert-success" role="alert" id="dialog-success">            
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
  </div>
</div>

and then you can have your script like this

if (!document.getElementById("AcceptTerms").checked) {
 let alert=$(".success").html()
 e.preventDefault();
 $("#AcceptTerms").focus();
 $(".alert-wrapper").html(alert)
}

CodePudding user response：

Is something like this what you are looking for?:

var myAlert = new bootstrap.Modal(document.getElementById('myAlert'))

function showAlert(msg, type) {
  document.getElementById("alertContent").innerHTML = `
      <div hljs-subst">${type} alert-dismissible fade show" role="alert">
        ${msg}
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>`
  myAlert.show()
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div id="myAlert" class="modal" tabindex="-1">
  <div id="alertContent" class="modal-dialog"></div>
</div>

<button onclick="showAlert('This is a warning alert<br>And a break', 'warning')">Warning</button>
<button onclick="showAlert('This is a danger alert', 'danger')">Danger</button>
<button onclick="showAlert('This is a success alert', 'success')">Success</button>