When I close my bootstrap modal, the modal opens again, then hide and the background stays darken. I am opening the modal on click on table tr. I also tried to force modal hide but it did not work. Please any help'll work.
<tr class="task-row task-row-{{$v_task->id}}" data-id="{{$v_task->id}}" data-target="#editTaskModal-{{$v_task->id}}">
<div id="editTaskModal-{{$v_task->id}}" class="modal fade editTaskModal" role="dialog" data-id="{{$v_task->id}}">
<input type="hidden" name="_method" value="put">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{$v_task->task_name}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<label for="listNameInput" class="col-sm-2">Name:</label>
<div class="col-sm-10">
<input type="text" name="taskNameName" class="form-control" placeholder="Your task name..." id="taskNameInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listPriorityInput" class="col-sm-2">Priority:</label>
<div class="col-sm-10">
<input type="text" name="taskNamePriority" class="form-control" placeholder="Your priority..." id="taskPriorityInput-{{$v_task->id}}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label for="listDeadlineInput" class="col-sm-2">Deadline:</label>
<div class="col-sm-10">
<div class="input-group datetimepicker2">
<input type="datetime" name="taskNameDeadline" class="form-control deadlineInput" placeholder="Deadline..." id="taskDeadlineInput-{{$v_task->id}}">
<div class="input-group-addon calendar-div">
<span class="fa fa-calendar-o"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success updateTaskModalBtn" data-dismiss="modal">Update</button> or
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
</div>
</div>
</div>
</div>
It seems you have an onclick event which triggers when the close link has been click to close the modal.
Referring to this:
<a data-dismiss="modal" href="" class="closeTaskModalLink"> Close</a>
There's no need to do that since there's an attribute that would close the modal.
So I suggest change your code above and do below and see how it works.
<a data-dismiss="modal">Close</a>
Update
Ok I see your JS code:
$('.editTaskModal').on('hidden.bs.modal', function () {
$('.editTaskModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
})
You should not include these, since what it would do is, if the modal is close/hidden it will hide the modal again. Which doesn't make sense since the modal is already close. That could be the reason why it's messing up the modal reveal/hide.
So remove that and see what happens.
Thanks, I found the problem. I had had my modal in tr and I also had triggered the modal opening on tr click and when I was trying to dismiss the modal the event repeated opening.
Related
Hi I have added a bootstrap modal on my site but the problem is it is not launching on $(window).load();
I have also tried adding an alert on window load it works fine but modal isn't loading on page load but yes modal is loaded if I trigger it through a button
For Reference you can check https://theinnovativepackaging.com/
And Modal is as follows
<div id="myDiscountModal" class="modal fade">
<div class="modal-dialog disc-modal">
<div class="modal-content">
<div class="modal-header disc-modal">
<div>
<h5 class="modal-title">SIGNUP TILL NOV 25th and Avail 10% OFF</h5>
</div>
<button type="button" class="close" data-dismiss="modal"><span class="discount-modal-close"><img width="10px" src="<?php echo base_url('/images/close.jpg')?>"></span></button>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-sm-6">
<img width="100%" src="<?php echo base_url('/images/discount-voucher.jpg')?>">
</div>
<div class="col-sm-6">
<p class="my-icon-title popup-content">Start Your Quotation Message with Discount Voucher and Get 10% OFF</p>
<form method="post" id="ajaxDiscountForm" action="javascript:void(0)">
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-envelope disc-modal-form-field-icon"></span>
<input type="email" name="email" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-phone disc-modal-form-field-icon"></span>
<input type="tel" id="" class="form-control" name="phone" placeholder="Phone Number">
</div>
</div>
<div id="discountMessage" style="display: none;"></div>
<button type="submit" id="send_discount_form" class="btn btn-primary">Get Discount</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
And Javascript Added is:
<script type="text/javascript">
$(window).on('load', function() {
$('#myDiscountModal').modal('show');
});
</script>
Anyone who can guide me what could be the possible conflict that its not working ?
There are multiple errors on your website that can be seen in the developer console. I believe many of them (including the one with Bootstrap modal) related to jQuery being imported twice. Try to remove one of them.
I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click
By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}
I made a modal which includes a form asking for information about a book. After clicking the button Add Book the modal is supposed to show so that one can enter the information about the book and after clicking add the entered data is used to create a Bootstrap card element and append it to the page. The problem is when clicking the Add Book button the modal shows but it isn't displaying properly (it appears fragmented with the Title and inputs floating above the page contents).
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-book-modal">AddBook</button>
<div class="modal fade" id="add-book-modal" tabindex="-1" aria-labelledby="add-book-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add a new book</h5>
</div>
</div>
<div class="modal-body">
<form id="add-form">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label for="author" class="col-form-label">Author:</label>
<input type="text" class="form-control" id="author" name="author">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comments:</label>
<textarea class="form-control" id="comment" name="comment"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="add">Add</button>
</div>
</div>
</div>
Is seems strange for me that div with class="modal fade" is inside button type="button". Move it inside container div class="container".
I have a modal for signup and signin. Inside signup modal when I want to go to signin modal from here and click to signin button then signup modal will hide and signin modal will appear. From same procedure happen to signin modal.
But here these signin or signup button inside the modal haven't work.
I have also used e.preventDefault(); inside the js function but still doesn't work.
I don't find out the script problem since I am not good in JS.
signin modal
<div class="modal fade bs-modal-sm" id="signin_modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="signin_myTab" class="nav nav-tabs">
<center><li id="signin_Modal_tab" class="active">SIGN IN</li></center>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="signin">
<span id="student_signin_error"></span>
<form class="form-horizontal" id="signin_form">
<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
<fieldset>
<!-- Sign In Form -->
<!-- Email input-->
<div class="control-group">
<div class="controls">
<input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
</div>
</div>
<div class="control-group">
<div class="controls">
<input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
</div>
</div>
<!-- Button -->
<div class="control-group">
<div class="controls modal_submit_button">
<button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
</div>
</div>
<div class="control-group">
<div class="controls modal_submit_button">
Don't have an account ! Click here to
Sign Up
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
Script
$(document).ready(function(){
$('.signup_from_signin_modal').click(function(e) {
e.preventDefault();
$('#signin_Modal').modal('hide');
$('#myModal').modal('show');
});
});
If I called alert() inside that script function it will work.
But $('#signin_Modal').modal('hide'); this function doesn't work.
Anybody Help please ?
Thanks in advance.
You have accidentally in your jQuery selector put signin_Modal ,
instead you should be trying to select signin_modal .
This is just something that happens from time to time in coding, happy hacking :)
On button click open Model like this
<i class="icon-note"></i>
Modal
<div id="edit-venue" class="modal fade portlet" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<form class="form-horizontal" id="editVenue" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Venue Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3"><b>Venue12</b></label>
<div class="control-label col-sm-9 text-left">
<input id="venue" name="venue" class="form-control venue_name" placeholder="Enter venue" type="text">
<span class="error"></span>
<span class="error"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3"><b>Room/Stage</b></label>
<div class="control-label col-sm-9 text-left">
<input id="roomStage" name="roomStage" class="form-control" placeholder="Enter room/stage" type="text">
<span class="error"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn red">Cancel</button>
<button type="button" data-dismiss="modal" class="btn green btn_save">Save</button>
</div>
</div>
</form>
</div>
</div>
When I click on button open modal, I'd like to on click button fill up the data in perticular textbox using javascript dynamically.
on button click i got response like this {"id":67,"value":"venue 1","Xvalue":"venue 1"}
i tried to : $('#venue_name').val(msg.value);
but instead of #venue_name I want to use the closest().
How can I do this?
If I understand your question right, you want to set the value in the input box of model from the message.
You need to use the shown.bs.modal event of the modal.
var msg = {"id":67,"value":"venue 1","Xvalue":"venue 1"};
$('#edit-venue').on('show.bs.modal', function (e) {
$("#venue").val(msg.value);
})
JSFIDDLE : https://jsfiddle.net/01zrxq7y/1/
Boostrap Doc : http://getbootstrap.com/javascript/#modals-events