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.
Related
I have a edit page like this
i have a comment button in this page,which is a modal form ,where users can leave their comment
when i submit the Comment form,the entire page is reloading and im losing the edit page content.
Im handling edit page content and comment box in two different forms.
So when i submit the comment form,the modal should open as it is and also the edit page content should not be gone.
This is my modal
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h5><i class="fas fa-user"></i> User 1</h5>
<small class="ml-auto">1 days ago</small>
</div>
<p>This is for testing.Please ignore this.</p>
</a>
</div>
<form asp-page-handler="SubmitChat">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
------------Edited-------------------
<!---COMMENT BOX STARTS HERE-->
<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content ">
<div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">
<h4 class="modal-title">Comments:</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body get_quote_view_modal_body">
<div class="list-group">
#if (Model.ShowRequestChatBox != null){
#foreach (var item in Model.ShowRequestChatBox)
{
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100">
<h6><i class="fas fa-user"></i> <i>#Html.DisplayFor(modelItem => item.CommentedUser)</i></h6>
<small class="ml-auto">#Html.DisplayFor(modelItem => item.LastModifiedTimeStamp)</small>
</div>
<p>#Html.DisplayFor(modelItem => item.Comments)</p>
</a>
}
}
</div>
<form asp-page-handler="SubmitChat" data-ajax="true" data-ajax-method="post" data-ajax-complete="Completed">
<div class="form-group mt-2">
<label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>
<textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>
<input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='#Request.Query["RequestID"]' />
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>
<button type="submit" id="BtnChatSubmit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--COMMENT BOX ENDS HERE-->
Javascript
function Completed(event) {
if (event.responseText != "") {
alert("Some Error Has Occured.Please Check Your Entered Values.");
} else {
alert("Your Comment Has Been Added Successfully");
}
}
Thanks,
Teena
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 a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.
Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>
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>
I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG