I have bootstrap modal which looks something like this ;
Following is the code for it
<!-- Buy Send Offer Success -->
<div class="modal fade custom-modal" id="make-offer-success" 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" onclick="javascript:add_request()"><span aria-hidden="true"><i class="fa fa-close"></i></span></button>
<h4 class="modal-title" id="myModalLabel"><?php echo $data['item']['brand'].' '.$data['item']['model'];?></h4>
</div>
<div class="modal-body">
<div class="send-success"><i class="fa fa-check"></i> Your offer has been successfully sent</div>
</div>
<div class="modal-footer">
<div class="col-md-6 btn-mrgn">
<input type="hidden" id="item_unique_id" value="<?php echo $data['item']['item_unique_id']; ?>">
<input type="hidden" id="buyer_id" value="<?php echo $this->session->userdata['id'] ?>">
<button type="submit" class="btn gray-btn btn-common upercase" onclick="javascript:add_request()">Close</button>
</div>
</div>
</div>
</div>
I am calling a java script function on close button and on "x" button on the modal. My problem is when user clicks anywhere on the screen Modal disappears, my function is not called and the screen stays faded.
Can anyone help to fix this problem?. How can i call my javascript function when user clicks anywhere on screen other than modal close buttons.
Instead using the hide event handler, which will be called however the modal was closed(assuming you are using modal method to hide the modal)
$('#make-offer-success').on('hide.bs.modal', function(){
//do your stuff
})
Demo: Fiddle
Related
I have a bootstrap modal, where I have few buttons to capture feedback.
I want to call a JS function on click of one of the buttons.
However, on click of the button, the modal just closes without calling the JS Function.
But, if I do the same onclick event on any other element not in the modal, it works fine.
js
<script>
function sayHello() {
alert("Demo Alert")
}
</script>
HTML
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
class="modal-dialog modal-lg modal-dialog-centered"
role="document"
>
<div class="appie-signup-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="appie-signup-box">
<h3 class="title">How was the Session?</h3>
<form action="#" id="mood-tracker">
<div class="row">
<div class="input-box">
<button type="submit" value="Good" onclick="sayHello()">
<i
class="fa fa-smile"
></i
>Good
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Where am I going wrong?
Please do not use button type "submit". Use type "button" instead of like this:
<button type="button" value="Good" onclick="sayHello()"><i class="fa fa-smile"></i>Good </button>
I think you should use window.confirm() instead of window.alert().
HTML
<button type="submit" value="Good" onclick="sayHello()">
JS
function sayHello() {
return confirm('Demo Alert');
}
I found this answer on another Stack Overflow page : HTML - How to do a Confirmation popup to a Submit button and then send the request?
C must be capital
use onClick not onclick
<button type="button" onClick="sayHello()">Button</button>
I have a dynamically created table with buttons in each row...If I click on the button a modal opens to enter the details with dark screen behind modal..On Click of accept button the modal closes and the dark screen must disappear..It disappears sometimes and not in other situations.
This is how my screen appears sometimes after click of accept button in modal
Screen that appears
: https://i.stack.imgur.com/wWnS8.jpg
<td>
<!-- for accepting -->
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message</label>
<textarea rows="3" name="message" id="message" class="form-control input-md message" ></textarea></p>
<div id="textarea_feedback_{{pl.id}}" class="textarea_feedback"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)" >Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</td>
In my Jquery:
$(document).on('click','.accept', function(e){
$(".modal-fade").modal("hide");
)}
Usually, when a modal is shown a backdrop or wrapper (dark screen) is also shown behind it.
Try removing that backdrop in your function like this:
$(document).on('click','.accept', function(e){
$(".modal-fade").modal("hide");
$(".modal-backdrop").remove();
)}
You are applying code with wrong class selector,
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
Check in above line, modal fade are two different classes. And you are using it as one in your jquery code. like this:
$(".modal-fade").modal("hide");
So try with changing it with proper class name. Here you go:
$(".modal").modal("hide");
I Have tried the above solution but after closing the popup using above method you will not be able to get popup again. When you again click on the button to show popup it will show you a black screen
Below solution works for me precisely.
$("#myModal .close").click();
$("#myModal .close").trigger("click");
I have a button which triggers a function from the JS for removing an entity:
<div type="button" class="transparentButton" ng-click="Remove(data)" title="Delete"
style="border-radius:50%;width:36px;height:36px;background-color:red;color:black;float:left;margin-left:5px;font-size:18px;"
><i class="glyphicon glyphicon-remove"></i></div></div>
I wanted to change it the way that it, at first, asks for a confirmation and then proceeds with the delete, so made the following change when clicking the button:
<div type="button" class="transparentButton" title="Delete" data-toggle="modal" data-target="#Confirm"
style="border-radius:50%;width:36px;height:36px;background-color:red;color:black;float:left;margin-left:5px;font-size:18px;"
><i class="glyphicon glyphicon-remove"></i></div></div>
And enabled some Modal in order to ask for confirm:
<div class="modal fade" id="Confirm" tabindex="-5" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" style="display: none;top:70px">
<div class="modal-dialog">
<div class="container">
<form class="form-signin">
<h4 class="delete-title">Sure you want to Delete?</h4>
<br>
<div class="yesnolink">
<a class="button1" ng-click="Remove(data)" style="float:left;margin-left:80px;">Delete</a>
<a class="button1" data-dismiss="modal" style="margin-right:100px;">Cancel</a>
</div>
</form>
</div>
</div>
</div>
Fun starts from here, the function triggered correctly when I use the initial button, but no action when I try to call it from modal. Any idea what am I missing?
So I have a few buttons that open the same modal but different content. I don't want to copy/paste the modal code each time I need to open a new model. I want to use the same modal code and according to the button clicked load different content in the modal. How can I do that?
Here is my modal code:
<div class="dialogs-holder">
<div class="dialog new_file">
<div class="dialog-header clearfix">
<a class="flaticon stroke maximize-4" href="/"></a>
<div class="dialog-title"><span class="gray-bckg">{{ //different according to button }}</span></div>
<div class="flaticon stroke x-1"></div>
</div>
<div class="dialog-content clearfix">
#include('includes.modals.' . //different template according to button )
</div>
</div>
</div>
How can I do that?
You have to use the javascript to do that.
first you have handle the each event when the buttons are clicked. then you can set the content by dynamically to the title and content of modal using javascript.
eg.
// give the id to title tag of modal
<span class="gray-bckg" id="modal_title"></span>
//give the id to content tag of modal
<div class="dialog-content clearfix" id="content"></div>
now add the script
//with script
$("#button1").on("click",function(e){
$("#content").val("this is button1 content");
$(".modal").open();
});
$("#button2").on("click",function(e){
$("#content").val("this is button2 content");
$(".modal").open();
});
It's a late answer and adapted for Laravel but it might interest someone.
I created a modal.blade.php
<div id="{{ $id or 'modal' }}" class="modal fade" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header text-center">
<h2>{{ $title }}</h2>
</div>
<div class="modal-body">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
And now when I want to pop-up a modal I use this
#component('whereyourmodalisplaced.modal', [
'id' => 'task-show', //If you use multi modal on same page, always use ID
'title' => 'Edit a task'])
#endcomponent
I'm updating the modal contact with ajax when needed with this kind of behaviour
<a href=""
data-endpoint="{{ route('tasks.show' , ['tasks' => $task->id]) }}"
data-target="task-show .modal-content .panel-body"
data-modal="task-show"
data-cache="false"
data-async="true"
data-toggle="modal" >{{ $task->name }}</a>
And make sure to always have this in your code
$('body').on('click', 'a[data-async="true"]', function(e)
{
e.preventDefault();
var self = $(this),
url = self.data('endpoint'),
target = self.data('target'),
modal = self.data('modal');
$.ajax({
url: url,
type: self.data('method'),
cache : self.data('cache'),
success: function(data)
{
if (target !== 'undefined'){ $('#'+target).html( data ); }
if (modal !== 'undefined'){ $('#'+modal).modal( 'show' ); }
}
});
});
follow bellow steps and you will got output which near your requirements.
Step 1. Create Routes like bellow in routes.php
Route::get('test_model1',['as'=>'test_model1', 'uses'=>'TestController#test_model1']);
Route::get('test_model2',['as'=>'test_model2', 'uses'=>'TestController#test_model2']);
Step 2. Setup Testcontroller with bellow code in Testcontroller.php
class TestController extends Controller {
public $param=array();
public function __construct(){
//$this->middleware('auth');
}
public function test_model1(){
$this->param['content']="Model 1 body.";
return view('test.model',$this->param);
}
public function test_model2(){
$this->param['content']="Model 2 body.";
return view('test.model',$this->param);
}
}
Step 3. setup model body content view. in resources/test/model.blade.php
<div class="row">
<div class="col-xs-12">
<p><?php echo $content; ?></p>
</div>
</div>
Step 4. setup bello code in any of your view file.
<a href="<?php echo route('test_model1'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-primary">
Launch Modal 1
</a>
<a href="<?php echo route('test_model2'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-danger">
Launch Modal 2
</a>
<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>
</div>
</div>
<script type="text/javascript">
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
I have this input button:
<input type="submit" data-toggle="modal" data-target="#NotAvailable" id="StandardProductAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled"/>
Where I'd like to fire my modal on if clicked.
My modal is:
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X" />
<h4 class="modal-title" id="myModalLabel">Not Available</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</form>
</div>
</div>
</div>
</div>
In the HTML, the Modal comes after the Input as well. Should it come before the Input?
Based upon the URL you provided, this will let you keep the disabled="disabled" attribute:
<script type="text/javascript">
$(document).ready(function()
{
$('#StandardProductAddToCart:disabled').click(function()
{
$('#NotAvailable').modal();
});
});
</script>
It doesn't matter if the modal comes before or after the button.
Your button is disabled so if you remove disabled="disabled", does it work?