I'm calling Bootstrap 5 modal from dropdown but instead of showing content it shows only grey background. What I'm missing?
Here is jsfiddle and here is code:
<div class="container">
<div class="row">
<div class="inline-block">
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
Launch demo modal
</button>
<div class="modal fade" id="test" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
The modal code should be outside the <ul> tag
<div class="container">
<div class="row">
<div class="inline-block">
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
Launch demo modal
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="test" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
Related
I am wanting to put the Modal trigger button into the navbar of the _Layout.cshtml, and be able to open the modal regardless of what url I am currently on.
My modal is housed inside a folder structure of abc/forms/create
I am only able to fire the modal up when on that page, im not quite sure how to get around the issue. for example if i was on the page of abc/forms/record the modal wouldnt fire
Below is my code for the modal (I have removed all inputs and labels etc... to save space
<!-- 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">
...
</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>
nav bar below
<nav class="navbar navbar-expand-lg navbar-light bg-dark py-3 mb-4 " style=" border-bottom: 3px solid #5bc0de;">
<div class="col-md-2">
<a asp-page="/Index">
<img src="~/assets/logo-bg.png" class="img-responsive" asp-area="" asp-page="/Index" />
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active ">
<a class="navbar-brand text-info mr-auto m-3 mr-2 " asp-area="" asp-page="/Index"><i class="fas fa-home text-success m-1"></i>Home</a>
</li>
<li class="nav-item">
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Index"><i class="far fa-calendar-alt text-warning m-1"></i>Resolution</a>
</li>
<li>
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Records"><i class="far fa-folder-open text-danger m-1"></i>Records</a>
</li>
<li>
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Create"><i class="far fa-folder-open text-danger m-1"></i>Create</a>
</li>
</ul>
<form class="form-inline">
#*<a class="btn btn-info form-control text-white d-inline-block m-3" style="width: 150px; ">Create Record</a>-->*#
<a asp-page="/Forms/Create" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create
</a>
</form>
#*<Partial name="_PartialButton" />*#
</div>
</nav>
Refer to Partial View in Asp.net core. Below is a simple demo.
Model:
public class User
{
public string Forename { get; set; }
}
_Layout.cshtml:
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create
</button>
<partial name="_ModalPartial.cshtml" model="new User()" />
__ModalPartial.cshtml:
#model User
<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">
<label asp-for="Forename"></label>
<input asp-for="Forename" />
</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>
Result:
I want to create a nested bootstrap collapse. The collapse with id="ss11" which acts as the parent works when its button is clicked but the other nested do not work. where could I have gone wrong? how do I get those nested collapse to work when their buttons are clicked. here is the HTML
<div class="card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
ss1 : science
</button>
</div>
<div class="collapse" id="ss11">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20141" aria-expanded="false" aria-controls="ss12013/20141">
2013/20141
</button>
</div>
<div class = "collapse" id = "ss12013/20141">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20151" aria-expanded="false" aria-controls="ss12014/20151">
2014/20151
</button>
</div>
<div class = "collapse" id = "ss12014/20151">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
ss1 : art
</button>
</div>
<div class="collapse" id="ss12">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20142" aria-expanded="false" aria-controls="ss12013/20142">
2013/20142
</button>
</div>
<div class = "collapse" id = "ss12013/20142">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20152" aria-expanded="false" aria-controls="ss12014/20152">
2014/20152
</button>
</div>
<div class = "collapse" id = "ss12014/20152">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
</div>
You can't have "/" in the name/ID; you can replace this with
hyphen "-"
Underscore "_"
to get the behavior that you're looking for...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
ss1 : science
</button>
</div>
<div class="collapse" id="ss11">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013_20141" aria-expanded="false" aria-controls="ss12013_20141">
2013/20141
</button>
</div>
<div class="collapse" id="ss12013_20141">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014-20151" aria-expanded="false" aria-controls="ss12014-20151">
2014/20151
</button>
</div>
<div class="collapse" id="ss12014-20151">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
ss1 : art
</button>
</div>
<div class="collapse" id="ss12">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013-20142" aria-expanded="false" aria-controls="ss12013-20142">
2013/20142
</button>
</div>
<div class="collapse" id="ss12013-20142">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014_20152" aria-expanded="false" aria-controls="ss12014_20152">
2014/20152
</button>
</div>
<div class="collapse" id="ss12014_20152">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
</div>
im trying to make bootstrap drop down menu but in it doesn't render as expected (the button to expand the menu is unclickable )
<div class="news-blocks mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 services-section">
<div class="inner">
<div class="inner-align">
<div class="row">
<div class="col-lg-4">
<h2 class="heading">
<i class="la la-gears"></i> الخدمات الإلكترونية </h2>
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
تسجيل الشركة
</button>
<div class="dropdown-menu" aria-labelledby="triggerId">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
<div class="col-lg-8">
<p class="text">
text
</p>
<button type="button" class="arrow-btn btn btn-primary btn-lg">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the area highlited in red should be the dropdown menu but it is not
I have three buttons that expand/collapse three divs, using Bootstrap. However, if I click on two different buttons in succession I get two divs expanded one after the other. Is it possible that before one div is expanded all others are collapsed so that only one div at a time can be visible?
Right now, if I had clicked on button 1 to expand Div1, I have to click on the button 1 again to collapse Div1 before I can click on button 2; otherwise contents of Div1 and Div2 both are displayed.
This is what I have:
<div class="btn-group btn-group-justified">
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span>
</button>
</div>
</div>
<div class="collapse" id="Div1">Content of Div1 here </div>
<div class="collapse" id="Div2">Content of Div2 here </div>
<div class="collapse" id="Div3">Content of Div3 here </div>
So you need to set a parent using data-parent="#parentdiv" to the toggle then have the class panel to contain all toggleddivs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="parentdiv"class="btn-group btn-group-justified">
<div class="panel">
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group"data-parent="#parentdiv" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span>
</button>
</div>
<div class="collapse" id="Div1">Content of Div1 here </div>
<div class="collapse" id="Div2">Content of Div2 here </div>
<div class="collapse" id="Div3">Content of Div3 here </div>
</div>
</div>
I'm currently trying to implement a modal that would show up when clicking a link in a navbar. I'm aware that similar questions have already been asked, but none of the solutions could work.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Tool</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>FAQ</li>
<li>About</li>
<li><a data-toggle="modal" data-target="#myModal">Add Something</a></li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
Scripts I'm using are : bootstrap.js, bootstrap.min.js, jquery-2.1.4.min.js
P.S : I've already tried the href="#" in the link.
Thanks for the help!
Try this:
(I only inserted the correct dependencies, your code is working)
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Tool</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>FAQ</li>
<li>About</li>
<li><a data-toggle="modal" data-target="#myModal">Add Something</a></li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>