When a Bootstrap alert is shown, I want to stay until the user explicitly dismisses it. However, all my alerts vanish within 5 seconds. How do I change this behavior?
My current alert code:
<div class="alert alert-dismissible alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button><b>Error:</b> Error message...</div>
Tried removing both alert-dismissible class but that didn't help.
Try this:
$(document).ready(function() {
$('button').click(function() {
$('.alert').show()
});
$('button').click(function() {
$(this).parents('div').hide();
});
});
.alert {
display: none;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<button type="submit" class="btn btn-primary">Submit</button>
<div class="alert alert-dismissible alert-success">
<button type="button" class="close">×</button>
<strong>Completed!</strong> Form successfully submitted...
</div>
</body>
This seems to be the results of adding "alert" as a class. The following works for me:
<div style="padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px" class="alert-dismissible alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button><b>Error:</b> Error message...</div>
Related
Sorry about the title but in fact I don't know how is question form in my case, So I'm working on project With ASP MVC Core 3.1 I want to show Modal when User Press button, So I took the code copy past from bootstrap website and it showing with me like the picture and here is my code into view
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#staticBackdrop">
</button>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
ria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
and here is my action
public IActionResult Statistics()
{
return View();
}
it sample but I don't know why it showing like this any one can help.
Ok guys here is the problem is my modal be into a view so it happened position problem when I appended into body it works fine. and here is the js code
$(function () {
$('#Btn1').click(function (event) {
$("#staticBackdrop").modal("show");
$("#staticBackdrop").appendTo("body");
});
});
Hu,
probably is CSS issues.
try to write this css code
.modal-backdrop {
/* bug fix - no overlay */
display: none;
}
for more info, read this article
https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background
Elaboration on Question:
I'm using a bootstrap modal dialogue, and I only want it to work if the user is logged in.
While vue.js can make this element disappear entirely if a user is not logged in, or handle links of any kind, 'data-target' is giving me trouble.
Goal: Check if a user is logged in before activating modal. If a user is NOT logged in, I handle it somewhere else in the code (details there are not germane to this question IMO, but involve activating a completely separate modal).
If the user IS logged in, then allow the modal to be activated via 'data-target'
Problem: Currently, when a user is NOT logged in, the 'reportModalIdWithHash' is activated before the
'checkForLogin()'
Code:
<span
class="float-right text-muted smaller-font make-clickable"
data-toggle="modal"
:data-target="reportModalIdWithHash"
v-on:click="checkForLogin()"
>
Report
</span>
Note About Preferred Solution:
I'd like to have "checkForLogin()" to happen before the modal is triggered by "data-target".
While I can always make elements dissappear with Vue.js, I want the user to see the option and then when they click on it, if they're not logged in, then present a login instead of the report modal.
Is it possible to intercept and re-fire 'data-target'?
Why not use a dynamic data-target?
:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"
new Vue({
el: '#app',
data: () => ({
isLoggedIn: false
}),
methods: {
handleLogin() {
// replace this with an async API call...
this.isLoggedIn = true;
// and switch modals...
['fancy', 'login'].forEach(name => $(`#${name}-modal`).modal('toggle'));
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<div id="app" class="container">
<div class="form-check p-3">
<input class="form-check-input" type="checkbox" v-model="isLoggedIn" id="check">
<label class="form-check-label" for="check">
<code>isLoggedIn</code> (click to change)
</label>
</div>
<div class="btn btn-primary" data-toggle="modal"
v-text="`Open Report`"
:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"></div>
<div class="modal fade" tabindex="-1" role="dialog" id="login-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Login modal content goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="handleLogin" data-dismiss="modal" >Login</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="fancy-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Fancy report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Fancy report goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Meh...</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
Note: this is a simple proof of concept, not production ready code:
don't use Vue + Bootstrap + jQuery as in my example (it's pretty barbaric). You're better off using BootstrapVue (and getting rid of jQuery).
You might want to use a single dynamic modal and inject the body, title and footer contents via slots. That's not always better but, in general, leads to DRY-er code at expense of readability.
With BootstrapVue, your button would look more like this:
<b-btn v-b-modal[`${isLoggedIn ? 'fancy' : 'login'}-modal`]> Open Modal</b-btn>
...or, if you want to handle it in a method:
<b-btn #click="handleOpenModal">Open modal</b-btn>
and:
methods: {
handleOpenModal() {
this.$bvModal.open(this.isLoggedIn ? 'fancy-modal' : 'login-modal');
}
}
I am trying to autofocus input element on bootstrap 4 modal open . I have tried below code from http://getbootstrap.com/docs/4.0/components/modal/ but this is not working.
Can someone help me to give working demo
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
Try the snippet below. Perhaps you need $(document).ready()
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<input type="text" class="form-control" id="myInput">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
I am also use this code
<script>
function setFocus(){
$('#searchModal').on('shown.bs.modal', function () {
$('#q').focus();
});
}
</script>
Where #searchModal is modal div ID and #q is input element ID
Use this code in button
<button type="button" onclick="setFocus()">Open Modal</button>
How does one open a modal from a Bootstrap popover? I'm having trouble with that. My sample code is below. Clicking on the button in the popover does not open the modal. Calling the modal from any other place on the page launches the modal.
I am using the following function for the popover:
$( function() {
$("[data-toggle=popover]").popover( {
html : true,
content : function() {
return $('#popover-content').html();
}
});
});
and here's the relevant HTML for my page:
<li>
<a data-toggle="popover" data-container="body" data-placement="left"
type="button" data-html="true" href="#" id="login">
<i class="zmdi zmdi-account-circle zmdi-hc-lg zmdi-hc-fw"
style="color:white; padding-top:10px;padding-right:32px">
</i>
</a>
</li>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right" style="background-color:#00c853;color:#fff; margin-top:0px" onclick="$('#changeProfileModal').modal()"> </button>
</div>
</div>
</div>
</div>
Thanks in advance for assisting me with this.
You might need to bind the click of the button (which is hidden) via the document.
See sample code below (adjust colours, sizes, etc to your liking)
$(function() {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#button2", function() {
$('#changeProfileModal').modal('show');
});
});
#button2 {
background-color: #00c853;
color: #fff;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul>
<li>
<a data-toggle="popover" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="login">
popover
</a>
</li>
</ul>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right">btn2</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="changeProfileModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
I have something like this on my HTML page.
<html>
<body>
<div dojoType="dijit.layout.TabContainer" id="allTabContainer" style="width: 1150px; height: 490px" tabPosition="left-h" persist="true">
<div dojoType="dijit.layout.ContentPane" id="firstTab_id" title="firstTab" >Content 1</div>
<div dojoType="dijit.layout.ContentPane" id="secondTab_id" title="secondTab" >Content 2</div>
<div dojoType="dijit.layout.ContentPane" id="thirdTab_id" title="thirdTab" ><jsp:include flush="true" page="thirdTab_page.jsp"></jsp:include></div>
</div>
</body>
</html>
I have 3 buttons on the thirdTab_page.jsp which on clicking would call the below selectTab javascript function. Please check the code for the same.
<html>
<body>
<div dojoType="dijit.layout.BorderContainer" style="padding:10px; width: 50%;" id="borderCont">
<button dojoType="dijit.form.Button" type="submit" id="firstTab" onclick="selectTab(this.id);">Tab1</button>
<button dojoType="dijit.form.Button" type="submit" id="secondTab" onclick="selectTab(this.id);">Tab2</button>
<button dojoType="dijit.form.Button" type="submit" id="thirdTab" onclick="selectTab(this.id);">Tab3</button>
</div>
</body>
</html>
And then I have the javascript function which goes on like this.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
function selectTab(tabId){
var correctTabId = tabId+"_id";
dijit.byId("allTabContainer").selectChild(correctTabId);
}
</script>
The tabContainer.selectChild doesn't seem to work in IE, but works perfect in Firefox. Please suggest if I have missed out something.
Thanks in advance.