Ok so i have a modal in bootstrap that has the class of show, to have it display on page load. So it has a ender button at the bottom but couldnt get it to close on click
So I now have script that closes if clicks any where on the box but really it only on that button
JS
<script>
$('.modal').click(function() {
$(this).removeClass('show');
$(this).addClass('hide');
});
</script>
Modal box classes
<div class="modal show"></div>
Button
<button type="button" class="btn btn-primary center-block click" style="font-size: 20px;" onClick='changeClass'">ENTER</button>
Any help would be great!
This doesn't work that way.
You only have to $('.modal .close').modal("hide");
.close being the class for your close button.
Or you can add attribute data-dismiss="modal" to close button.
Ref: http://getbootstrap.com/javascript/#modals-methods
If you are using bootstrap you can do this to close and show a modal:
$('.modal').modal('toggle');
Check out the documentation here.
Also note that bootstrap has an out of the box close button (which you need to include inside your modal) to handle this behavior:
<button type="button" class="close" data-dismiss="modal">x</button>
Related
I'm using session storage to show and hide a modal when loading the page for the first time. I don't know how to use cookies so I just use session storage.
In the modal, I change the header and the close button when you close it for the first time, then is accessible as a "help modal" instead of "getting started".
I want to prevent to close the modal with esc if the session storage is not set up and is in "getting started" mode, but when you close the modal and you reopen it as a "help modal" enable the esc event.
At the moment I make it work at 50%, first time you can't use esc but if you open it as a "help" you still can't use esc, although, if you reload the page esc it works,
Here is the else part of my code, effective when the session storage is not setup:
} else {
// show the help modal
$('#help').modal({
keyboard: false
});
$('#help').modal('show');
$('#help').on('hidden.bs.modal', function (e) {
keyboard: true
})
}
The documentation (https://getbootstrap.com/docs/4.0/components/modal/#events)
said that the .on('hidden.bs.modal' event is fired when the modal has finished being hidden from the user.
Which event I have to use to make it works as I want?
As it seems, you cannot simply re-configure an already initialized modal by supplying new options object to it. Meaning that if you do the following:
$('#help').modal({
keyboard: false
});
$('#help').modal({
keyboard: true
});
…than the latter statement won't have any effect.
So, in order to overcome this, I would suggest to destroy the first modal –the one with keyboard: false– and create a new modal that listens to keyboard events too.
Check the working snippet below.
Note: the first modal is created at pageload from code using keyboard: false, while consecutive modals launched by the button are set with the defaults, so with keyboard: true.
// } else {
// show the help modal
$('#help').modal({
keyboard: false
});
// Note the `one` binding
$('#help').one('hidden.bs.modal', function (event) {
$('#help').modal('dispose');
});
// }
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#help">
Open Help
</button>
<div id="help" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">HELP</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This is the Help modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
I am trying to create a form with two 'pages' using bootstrap modal,
when the user clicks "next" it suppose to hide the modal, load new content and show it again.
but when I close the modal with .modal("hide"), it doesn't close the modal but also shows another modal and make the screen even darker.
also when I click the close button that bootstrap gives us, it shows two modals and a second later hides them, and the second time i click to open the modal i have 3 modals!
whenever i click any button in the modal it adds another modal to the page.
what can i do??
here is some code, the simplest functions that still cause that problem.
function additionFormValidate() {
if ($('#form-modal').is(':visible')) {
secondPage();
} else {
console.log("modal didnt open");
}
}
function secondPage() {
$("#form-modal").modal("hide");
}
HTML
<div class="modal fade" id="form-modal" onclick="openModal()" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="additionFormValidate()">Next</button>
</div>
</div>
</div>
does anyone familiar with this?
sometimes you need setTimeout() to prevent javascript to working too fast.
demo: http://jsbin.com/remevolemi/3/edit?html,output
$('.btn1').click(function(){
$('#modal1').find('.modal-body').text('first content');
$('#modal1').modal('show');
});
$('.btn-next').click(function(){
$("#modal1").modal('hide'); //hide modal
setTimeout(function(){
$("#modal1").find('.modal-body').text('second content'); //change modal content
$('#modal1').modal('show');//show modal again
}, 500); //wait 0.5 sec
});
here some example for another case: http://jsbin.com/edit?html,output
i've some problem that make make head feels so heavy... i've searched for the answer in this forum, but the problem still not solve.
my problem is i've a button that link to modals. when first time after the page refreshed the modal open while the button clicked. but not for the second time.
i've check the log and the log said
TypeError: $(...).modal is not a function[Learn More].
if i refreshed the page, it will only work once, and the second click of the button, the modals not open again...
this is my button HTML view code..
<button class="btn btn-info btn-sm btn-labeled" type="button" id="tambahUser" data-toggle = "modal" value="<?= Url::to(['/module/create'],true)?>">
this is my modal
<div id="modalSignUpSm" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal" id="tutupModal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Colored Header Modal</h4>
</div>
<div class="modal-body">
<div id="modalContent"></div>
</div>
</div>
</div>
</div>
and this is my js code that responsible for handling click event of the button
$('#tambahUser').click(function(event){
$('#modalSignUpSm').modal({
backdrop: 'static',
keyboard: false,
})
.modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
$('#tutupModal').click(function(){
$('#modalSignUpSm').modal('close');
});
this is my controller (i'm using Yii2) of Module/create
public function actionCreate()
{
$model = new Module();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(Url::to(['/paneladm/pengaturan/module',true]));
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
My Question is why the modals only open once and after that, the button stuck..? how to resolve that...
Note: - i'm new on jQuery, and i will very thanks for every answer.
- i've search on this forum and try to resolve with create a button and every this button clicked will be firing the .modal('close') but still not work
You should either use Bootstraps data-attributes to trigger the modal on and off, or use trigger via javascript manually. Right now you are trying to do both. See this example.
So I would remove the bootstrap data-attributes and then make sure your bootstrap script is loaded before your own javascript.
I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.
My HTML is:
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the next modal</p></div>
</div>
</div>
<div id="test-modal2" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<p>modal show after a hide doesn't work?</p>
</div>
</div>
and my jquery is:
$('.option').click(function() {
$('#test-modal').modal('hide');
$('#test-modal2').modal('show');
});
This can help:
Remove hide class from modals divs
You use .option in your selector, but in html you use id="option", so change them
Working version
My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Please try using this data-dismiss attribute on close button.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I have a simple div tag, that contains a button. When ever user clicks on this button it simply shows an alert.
<div id="myDiv">
<input type="button" id="btn" value="Click Me" />
</div>
and I also have a empty twitter bootstrap modal.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body"></div>
</div>
I have a second button, when ever the user clicks on it, it opens the bootstrap modal. I want to show "myDiv" in bootstrap modal when ever the user clicks on the second button. I want "myDiv" to be present in when ever modal opens and also I want to be present in my HTML document. So that I can always access it with out creating second button in modal.
Any idea how can I do that ?
I think this is what you were going for so basically on the modal show we append that button to the modal body.
$("#myDiv") .appendTo(".modal-body");
but we aren't done because after modal close we need to get it back in the body so we do:
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv") .prependTo("body");
})
Here is a working fiddle:
http://jsfiddle.net/zcb3h/2/
I hope this is what you were looking for.