How to use bootstrap 4 alerts?
-5
I would like to use bootstrap's styled alerts instead of the default javascript alerts.
How can I trigger the bootstrap alert instead of the regular alert in the following code?
<button type="button" onclick="alert('my message')">Click Me!</button>
<div class="alert alert-primary" role="alert">
my alternative message
</div>
I don't want to see the message inside the div constantly on the screen, only when I press the button.
Edit: the answer that I am looking for is: what should be the value of onclick attribute so that the message will appear ONLY after clicking the button.
javascript html bootstrap-4
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
|
show 3 more comments
-5
I would like to use bootstrap's styled alerts instead of the default javascript alerts.
How can I trigger the bootstrap alert instead of the regular alert in the following code?
<button type="button" onclick="alert('my message')">Click Me!</button>
<div class="alert alert-primary" role="alert">
my alternative message
</div>
I don't want to see the message inside the div constantly on the screen, only when I press the button.
Edit: the answer that I am looking for is: what should be the value of onclick attribute so that the message will appear ONLY after clicking the button.
javascript html bootstrap-4
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
Did you try something? please show us.
– Nir Tzezana
Nov 14 '18 at 13:01
stackoverflow.com/questions/10082330/…
– Quentin
Nov 14 '18 at 13:03
@NirTzezana - I tried several examples for instance this one: bootply.com/r4cwV5Jw35 but this for example doesn't include the trigger action. Also if I reomve the 'fade' class the message appear on the screen, so I don't understand what it the best practice here
– GyRo
Nov 14 '18 at 13:09
@Quentin - the link that you provided doesn't include bootstrap div of alert. and also I don't see how to trigger the alert message (meaning call: show the message)
– GyRo
Nov 14 '18 at 13:13
1
Also you want a modal (I think). An alert is just an inline element with a style
– Liam
Nov 14 '18 at 13:21
|
show 3 more comments
-5
-5
-5
I would like to use bootstrap's styled alerts instead of the default javascript alerts.
How can I trigger the bootstrap alert instead of the regular alert in the following code?
<button type="button" onclick="alert('my message')">Click Me!</button>
<div class="alert alert-primary" role="alert">
my alternative message
</div>
I don't want to see the message inside the div constantly on the screen, only when I press the button.
Edit: the answer that I am looking for is: what should be the value of onclick attribute so that the message will appear ONLY after clicking the button.
javascript html bootstrap-4
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
I would like to use bootstrap's styled alerts instead of the default javascript alerts.
How can I trigger the bootstrap alert instead of the regular alert in the following code?
<button type="button" onclick="alert('my message')">Click Me!</button>
<div class="alert alert-primary" role="alert">
my alternative message
</div>
I don't want to see the message inside the div constantly on the screen, only when I press the button.
Edit: the answer that I am looking for is: what should be the value of onclick attribute so that the message will appear ONLY after clicking the button.
javascript html bootstrap-4
javascript html bootstrap-4
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
edited Nov 14 '18 at 13:15
GyRo
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
asked Nov 14 '18 at 12:59
GyRoGyRo
1,08941832
1,08941832
Did you try something? please show us.
– Nir Tzezana
Nov 14 '18 at 13:01
stackoverflow.com/questions/10082330/…
– Quentin
Nov 14 '18 at 13:03
@NirTzezana - I tried several examples for instance this one: bootply.com/r4cwV5Jw35 but this for example doesn't include the trigger action. Also if I reomve the 'fade' class the message appear on the screen, so I don't understand what it the best practice here
– GyRo
Nov 14 '18 at 13:09
@Quentin - the link that you provided doesn't include bootstrap div of alert. and also I don't see how to trigger the alert message (meaning call: show the message)
– GyRo
Nov 14 '18 at 13:13
1
Also you want a modal (I think). An alert is just an inline element with a style
– Liam
Nov 14 '18 at 13:21
|
show 3 more comments
Did you try something? please show us.
– Nir Tzezana
Nov 14 '18 at 13:01
stackoverflow.com/questions/10082330/…
– Quentin
Nov 14 '18 at 13:03
@NirTzezana - I tried several examples for instance this one: bootply.com/r4cwV5Jw35 but this for example doesn't include the trigger action. Also if I reomve the 'fade' class the message appear on the screen, so I don't understand what it the best practice here
– GyRo
Nov 14 '18 at 13:09
@Quentin - the link that you provided doesn't include bootstrap div of alert. and also I don't see how to trigger the alert message (meaning call: show the message)
– GyRo
Nov 14 '18 at 13:13
1
Also you want a modal (I think). An alert is just an inline element with a style
– Liam
Nov 14 '18 at 13:21
Did you try something? please show us.
– Nir Tzezana
Nov 14 '18 at 13:01
Did you try something? please show us.
– Nir Tzezana
Nov 14 '18 at 13:01
stackoverflow.com/questions/10082330/…
– Quentin
Nov 14 '18 at 13:03
stackoverflow.com/questions/10082330/…
– Quentin
Nov 14 '18 at 13:03
@NirTzezana - I tried several examples for instance this one: bootply.com/r4cwV5Jw35 but this for example doesn't include the trigger action. Also if I reomve the 'fade' class the message appear on the screen, so I don't understand what it the best practice here
– GyRo
Nov 14 '18 at 13:09
@NirTzezana - I tried several examples for instance this one: bootply.com/r4cwV5Jw35 but this for example doesn't include the trigger action. Also if I reomve the 'fade' class the message appear on the screen, so I don't understand what it the best practice here
– GyRo
Nov 14 '18 at 13:09
@Quentin - the link that you provided doesn't include bootstrap div of alert. and also I don't see how to trigger the alert message (meaning call: show the message)
– GyRo
Nov 14 '18 at 13:13
@Quentin - the link that you provided doesn't include bootstrap div of alert. and also I don't see how to trigger the alert message (meaning call: show the message)
– GyRo
Nov 14 '18 at 13:13
1
1
Also you want a modal (I think). An alert is just an inline element with a style
– Liam
Nov 14 '18 at 13:21
Also you want a modal (I think). An alert is just an inline element with a style
– Liam
Nov 14 '18 at 13:21
|
show 3 more comments
2 Answers
2
active
oldest
votes
-1
this is a 2 part solution.
First you would need HTML markup that represent the alert (and the trigger button)
<button id="btnShowAlert" type="button">Click Me!</button>
<div id="myAlert" style="display: none;" class="alert alert-primary" role="alert">
my alternative message
</div>
Then secondly you would need the JavaScript (jQuery) that listens for click events on the button, then show the alert accordingly.
$('#btnShowAlert').on('click', function()
$('#myAlert').style('display', 'block');
);
My question is... Are you perhaps looking for Modals ???
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
add a comment |
0
Here is a more generic Solution for you, where you could type your wanted message, too.
function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>Otherwise you could easily use modal and set its message like i did here:
function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300830%2fhow-to-use-bootstrap-4-alerts%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
this is a 2 part solution.
First you would need HTML markup that represent the alert (and the trigger button)
<button id="btnShowAlert" type="button">Click Me!</button>
<div id="myAlert" style="display: none;" class="alert alert-primary" role="alert">
my alternative message
</div>
Then secondly you would need the JavaScript (jQuery) that listens for click events on the button, then show the alert accordingly.
$('#btnShowAlert').on('click', function()
$('#myAlert').style('display', 'block');
);
My question is... Are you perhaps looking for Modals ???
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
add a comment |
-1
this is a 2 part solution.
First you would need HTML markup that represent the alert (and the trigger button)
<button id="btnShowAlert" type="button">Click Me!</button>
<div id="myAlert" style="display: none;" class="alert alert-primary" role="alert">
my alternative message
</div>
Then secondly you would need the JavaScript (jQuery) that listens for click events on the button, then show the alert accordingly.
$('#btnShowAlert').on('click', function()
$('#myAlert').style('display', 'block');
);
My question is... Are you perhaps looking for Modals ???
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
add a comment |
-1
-1
-1
this is a 2 part solution.
First you would need HTML markup that represent the alert (and the trigger button)
<button id="btnShowAlert" type="button">Click Me!</button>
<div id="myAlert" style="display: none;" class="alert alert-primary" role="alert">
my alternative message
</div>
Then secondly you would need the JavaScript (jQuery) that listens for click events on the button, then show the alert accordingly.
$('#btnShowAlert').on('click', function()
$('#myAlert').style('display', 'block');
);
My question is... Are you perhaps looking for Modals ???
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
this is a 2 part solution.
First you would need HTML markup that represent the alert (and the trigger button)
<button id="btnShowAlert" type="button">Click Me!</button>
<div id="myAlert" style="display: none;" class="alert alert-primary" role="alert">
my alternative message
</div>
Then secondly you would need the JavaScript (jQuery) that listens for click events on the button, then show the alert accordingly.
$('#btnShowAlert').on('click', function()
$('#myAlert').style('display', 'block');
);
My question is... Are you perhaps looking for Modals ???
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
answered Nov 14 '18 at 13:15
marvinIsSaculmarvinIsSacul
53717
53717
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
add a comment |
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
Thank you and yes! perhaps I am looking for modal
– GyRo
Nov 14 '18 at 13:21
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
If you want a modal why have you marked this as the accepted answer? @GyRo
– Liam
Nov 14 '18 at 13:22
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
@GyRo you can read about and learn how to use BootStrap 4 modals on this link https://getbootstrap.com/docs/4.1/components/modal/
– marvinIsSacul
Nov 14 '18 at 13:26
add a comment |
0
Here is a more generic Solution for you, where you could type your wanted message, too.
function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>Otherwise you could easily use modal and set its message like i did here:
function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
add a comment |
0
Here is a more generic Solution for you, where you could type your wanted message, too.
function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>Otherwise you could easily use modal and set its message like i did here:
function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
add a comment |
0
0
0
Here is a more generic Solution for you, where you could type your wanted message, too.
function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>Otherwise you could easily use modal and set its message like i did here:
function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
Here is a more generic Solution for you, where you could type your wanted message, too.
function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>Otherwise you could easily use modal and set its message like i did here:
function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>function alert(message)
document.getElementById('alert-msg').innerHTML = message; // set message text
if (document.getElementById('alert').classList.contains('d-none')) document.getElementById('alert').classList.remove('d-none'); // Display alert-box
function closeAlert()
document.getElementById('alert').classList.add('d-none'); // hide alert-box
document.getElementById('alert-msg').innerHTML = ''; // reset message
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-sm btn-primary" onclick="alert('my message');">Click Me!</button>
<div class="alert alert-primary clearfix d-none" role="alert" id="alert">
<span id="alert-msg"></span><button type="button" class="btn btn-sm btn-primary float-right" onclick="closeAlert();">Close</button>
</div>function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>function setMessage(message)
document.getElementById('alert-message').innerHTML = message;
// set your Message to the <span> inside your modal.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="setMessage('My Message');">
Click Me!
</button>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span id="alert-message"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
edited Nov 14 '18 at 14:16
answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
answered Nov 14 '18 at 13:27
J. SadiJ. Sadi
1,6511923
1,6511923
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300830%2fhow-to-use-bootstrap-4-alerts%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you try something? please show us.
– Nir Tzezana
Nov 14 '18 at 13:01
stackoverflow.com/questions/10082330/…
– Quentin
Nov 14 '18 at 13:03
@NirTzezana - I tried several examples for instance this one: bootply.com/r4cwV5Jw35 but this for example doesn't include the trigger action. Also if I reomve the 'fade' class the message appear on the screen, so I don't understand what it the best practice here
– GyRo
Nov 14 '18 at 13:09
@Quentin - the link that you provided doesn't include bootstrap div of alert. and also I don't see how to trigger the alert message (meaning call: show the message)
– GyRo
Nov 14 '18 at 13:13
1
Also you want a modal (I think). An alert is just an inline element with a style
– Liam
Nov 14 '18 at 13:21