I have created the model using bootstrap 3 but my model fades with the background and does not work.
Here is the screenshot and code!
Upload
<div class="modal fade" id="upload" tabinex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Upload Image</h2>
</div>
<div class="modal-body">
<p>select an image</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is a working sample. http://jsbin.com/togozico/1/edit. Is your problem with z-index?
Related
I have a modal dialog in my ASP.NET Web application using the following code:
<div class="modal fade" id="mdlNewNote" tabindex="-1" aria-labelledby="mdlNewNoteLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mdlNewNoteLabel">Add New Note</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="was-validated" id="frmNote" name="frmNote" method="post">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-floating col-sm-12">
<textarea class="form-control" rows="10" id="NoteBody" name="NoteBody"></textarea>
<label for="NoteBody">Notes</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
In that block there is a <textarea> element that I want to be sized inside the modal according to its row count, which is set at 10. However, it only actually displays three rows in the modal, as shown below:
How do I fix it so that the <textarea> element is as tall as it should be (based on number of rows it is given) rather than the 3 rows it shows now?
With bootstrap, you have to override the height by using:
.specific-textarea { height: 100% !important; }
cf:
https://stackoverflow.com/a/58398265/12172974
Use HTML for textarea sizing.
<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
im new at using laravel 8, im following this tutorial tu create an ADD button with the modal but seems like the difference in version of laravel cause the problem where nothing happenned when i clicked on the ADD button. i'm following this video tutorial https://www.youtube.com/watch?v=rQ4m6xe5wGM&list=PLRheCL1cXHrvJvoJ68PXdJr5tr5Aob2-c&index=9
this is the code from the getbootstrap that i copied from the website. the step is just the same as the tutorial but mine doesnt popout
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</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">Send message</button>
</div>
</div>
</div>
</div>
if you want to popup a bootstrap modal when clicking a button in bootstrap version 4
use data-target attribute like this data-target="#exampleModal" pass an id with a hashtag .then you can make a popup that modal when button click pass that id in modal class id attribute id="exampleModal"
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</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">
...
</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>
I am trying to use bootstrap 4 modal plugin only.
I linked the JQuery first & then the JS file of plugin found in bootstrap/js/dist/modal.js in their Github repo.
After including modal.js it gives me this error in console on page refresh & i am unable to use bootstrap modal.
Uncaught TypeError: Cannot read property 'on' of undefined
Here's my modal HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</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">
...
</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>
Including JQuery & Modal.js above the </body> tag
<script src="js/vendors/jquery.min.js"> </script>
<script src="js/vendors/modal.js"> </script>
</body>
</html>
I don't know what happened but I build a modal for Shopping-Cart Page.
When I try to click the title of Item in modal, and the modal will hide and link can not affect as normal. I don't know why and how to solve it.
It makes me so frustrated.
My Bootstrap4 Version is 4.1.3
Is this bug caused by this version?
Here is my code:
<div id="modalCart" class="modal fade" tabindex="-1" role="document">
<div class="modal-dialog bg-light" role="document">
<div class="modal-header">
<h5 class="modal-title text-center"><i class="fas fa-shopping-cart pr-1"></i>購物車</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form class="form-group">
<div class="media cart-item mt-3 mb-3">
<img class="mr-3" src="img/NOIMAGE.png" style="width: 120px; height: auto;">
<div class="media-body">
<h5 class="mt-0">商品1</h5>
<div class="price-group">
<div class="form-inline">
<span class="price mr-1" style="width: 4em;">500元</span>
<span class="multiple mr-4"><i class="fas fa-times"></i></span>
<div class="input-group mr-2">
<div class="input-group-prepend">
<a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-left"></i></a>
</div>
<input type="text" class="form-control" value="1" style="width: 5em; text-align: center;">
<div class="input-group-append">
<a class="btn btn-outline-secondary" href="#"><i class="fas fa-caret-right"></i></a>
</div>
</div>
<a class="btn btn-danger" href="#"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer text-center">
關閉購物車
<i class="fas fa-cart-arrow-down pr-1"></i>結帳
</div>
</div>
</div>
You are missing modal-content level. It should be structured in the following way (schematically):
.modal
.modal-dialog
.modal-content
.modal-header
.modal-body
.modal-footer
And you did it like this:
.modal
.modal-dialog
.modal-header
.modal-body
.modal-footer
When you fix html structure everything will work fine.
I have been trying to make this work but the submit button is not working at all.
The bootstrap modal window I am using is:
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</div>
</form>
</div>
</div>
Whenever I click the submit buttons, nothing happens and the form doesn't post the values.
Let me know how to make this work.
Try this using javascript. It worked for me:
<form name='searchdata' id="search_form" action="search.php" method="get">
<div class="input-with-icon success-control">
<input type="text" class="form-control" id="form1Amount" name="searchvalue" placeholder="Search in users or #hashtags"><br/>
</div>
<button onclick="form_submit()" name='user_search' value='user' class="btn btn-danger"><i class="fa fa-user"></i> User</button>
<button onclick="form_submit()" name='tag_search' value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</form>
<script type="text/javascript">
function form_submit() {
document.getElementById("search_form").submit();
}
</script>
Submit button is not in the form. Place form="modal-details" to the button, which is form id. You should not have data-dismiss="modal" on submit button, which is a bootstrap handler for closing the modal box. It is working for me.
<div class="modal fade" id="filterModal" 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">Client Filter</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Details" asp-controller="Client" method="get" id="modal-details">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Branch:</label>
<select asp-for="NetworkUnitId" class="custom-select form-control">
<option value="0">All</option>
#foreach (var client in classifierService.GetClients())
{
<option value="#client.Id">#client.Name</option>
}
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" form="modal-details">Search</button>
</div>
</div>
</div>
</div>
You have not mentioned modal-content here. I think that's why you may be getting the error.
<button type="button" class="btn btn-primary" data-target="#search" data-toggle="modal" name="button">modal</button>
<div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="modal-title">
<a class="close" data-dismiss="modal">×</a>
<h4><span class="fa fa-search"></span> Search Anything...</h4>
</div>
</div>
<form name='searchdata' action="webarch/search.php" method="post" id="form1">
<div class="modal-body">
<form class="frm-group" action="index.html" method="post">
<div class="modal-content">
<input type="text" name="" value="">
<button type="submit" name='user_search' form="form1" id="user_search" value='user' class="btn btn-danger btn-cons"><i class="fa fa-user"></i> User</button>
<button type="submit" name='tag_search' form="form1" value='tag' class="btn btn-default"><i class="fa fa-tag"></i> Tags</button>
</div>
</form>
</div>
</div>