Bootstrap modal not working after clicking buttonWhy don't self-closing script elements work?How do JavaScript closures work?How do I detect a click outside an element?Trigger a button click with JavaScript on the Enter key in a text box<button> vs. <input type=“button” />. Which to use?How does JavaScript .prototype work?How can I know which radio button is selected via jQuery?How to create an HTML button that acts like a link?How does data binding work in AngularJS?Cannot display HTML string
Would the USA be eligible to join the European Union?
Why aren't rainbows blurred-out into nothing after they are produced?
Dogfights in outer space
Big number puzzle
Causal Diagrams using Wolfram?
What would it take to get a message to another star?
Luggage Storage at Szechenyi Baths
Stephen King and steam/diesel/cyber-punk
How would armour (and combat) change if the fighter didn't need to actually wear it?
Escape Velocity - Won't the orbital path just become larger with higher initial velocity?
Scam? Phone call from "Department of Social Security" asking me to call back
Running code generated in realtime in JavaScript with eval()
Would Mirko Vosk, Mind Drinker trigger Waste Not?
How do I call a 6-digit Australian phone number with a US-based mobile phone?
Cases with long math equation
What is the farthest a camera can see?
Help, I cannot decide when to start the story
Shifting tenses in the middle of narration
A torrent of foreign terms
How do some PhD students get 10+ papers? Is that what I need for landing good faculty position?
Lípínguapua dopo Pêpê
"Table of Astronomy's" depiction of the solar system models
"Mouth-breathing" as slang for stupidity
Telephone number in spoken words
Bootstrap modal not working after clicking button
Why don't self-closing script elements work?How do JavaScript closures work?How do I detect a click outside an element?Trigger a button click with JavaScript on the Enter key in a text box<button> vs. <input type=“button” />. Which to use?How does JavaScript .prototype work?How can I know which radio button is selected via jQuery?How to create an HTML button that acts like a link?How does data binding work in AngularJS?Cannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I had tried bootstrap modal and its button is not working. Please help out
Thank u
My code that is not working:
<body>
<div class="quit_modal" tabindex="-1" role="dialog" data-toggle="modal" data-target="quit_model">
<div class="modal-dialog" id="delete-file-modal" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btnClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ml-2"></div>
<button type="button" class="btn btn-secondary"><a id="close" data-dismiss="modal" data-target="#quit_modal">Close</a></button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
</script>
</body>
https://i.stack.imgur.com/bj16u.png
javascript html bootstrap-modal
add a comment |
I had tried bootstrap modal and its button is not working. Please help out
Thank u
My code that is not working:
<body>
<div class="quit_modal" tabindex="-1" role="dialog" data-toggle="modal" data-target="quit_model">
<div class="modal-dialog" id="delete-file-modal" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btnClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ml-2"></div>
<button type="button" class="btn btn-secondary"><a id="close" data-dismiss="modal" data-target="#quit_modal">Close</a></button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
</script>
</body>
https://i.stack.imgur.com/bj16u.png
javascript html bootstrap-modal
did you add bootstrap css?
– Devsi Odedra
Mar 27 at 10:55
add theJQuery
part under(document).ready()
function and provide right selector.quit_Modal
– Aarif
Mar 27 at 10:55
not added bootstrap
– krishna priya prasannan
Mar 27 at 11:10
tried jquery stil not working
– krishna priya prasannan
Mar 27 at 11:11
add a comment |
I had tried bootstrap modal and its button is not working. Please help out
Thank u
My code that is not working:
<body>
<div class="quit_modal" tabindex="-1" role="dialog" data-toggle="modal" data-target="quit_model">
<div class="modal-dialog" id="delete-file-modal" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btnClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ml-2"></div>
<button type="button" class="btn btn-secondary"><a id="close" data-dismiss="modal" data-target="#quit_modal">Close</a></button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
</script>
</body>
https://i.stack.imgur.com/bj16u.png
javascript html bootstrap-modal
I had tried bootstrap modal and its button is not working. Please help out
Thank u
My code that is not working:
<body>
<div class="quit_modal" tabindex="-1" role="dialog" data-toggle="modal" data-target="quit_model">
<div class="modal-dialog" id="delete-file-modal" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btnClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ml-2"></div>
<button type="button" class="btn btn-secondary"><a id="close" data-dismiss="modal" data-target="#quit_modal">Close</a></button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
</script>
</body>
https://i.stack.imgur.com/bj16u.png
javascript html bootstrap-modal
javascript html bootstrap-modal
asked Mar 27 at 10:53
krishna priya prasannankrishna priya prasannan
167 bronze badges
167 bronze badges
did you add bootstrap css?
– Devsi Odedra
Mar 27 at 10:55
add theJQuery
part under(document).ready()
function and provide right selector.quit_Modal
– Aarif
Mar 27 at 10:55
not added bootstrap
– krishna priya prasannan
Mar 27 at 11:10
tried jquery stil not working
– krishna priya prasannan
Mar 27 at 11:11
add a comment |
did you add bootstrap css?
– Devsi Odedra
Mar 27 at 10:55
add theJQuery
part under(document).ready()
function and provide right selector.quit_Modal
– Aarif
Mar 27 at 10:55
not added bootstrap
– krishna priya prasannan
Mar 27 at 11:10
tried jquery stil not working
– krishna priya prasannan
Mar 27 at 11:11
did you add bootstrap css?
– Devsi Odedra
Mar 27 at 10:55
did you add bootstrap css?
– Devsi Odedra
Mar 27 at 10:55
add the
JQuery
part under (document).ready()
function and provide right selector .quit_Modal
– Aarif
Mar 27 at 10:55
add the
JQuery
part under (document).ready()
function and provide right selector .quit_Modal
– Aarif
Mar 27 at 10:55
not added bootstrap
– krishna priya prasannan
Mar 27 at 11:10
not added bootstrap
– krishna priya prasannan
Mar 27 at 11:10
tried jquery stil not working
– krishna priya prasannan
Mar 27 at 11:11
tried jquery stil not working
– krishna priya prasannan
Mar 27 at 11:11
add a comment |
3 Answers
3
active
oldest
votes
Your current selectors ( "quit_Modal" and 'btnClose') with no class .
or identifier #
signs will refer to tags, so the jQuery will search for tags with the name of <quit_Modal>
and <btnClose>
in your DOM.
You're missing the selectors sign (dot .
and #
):
$("#quit_Modal").modal('show');
$('.btnClose').trigger('click');
NOTE: The quit_Modal
should be an id id="quit_Modal"
.
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
1
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
add a comment |
Your selector is wrong.
Instead of:
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
use this:
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
add a comment |
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
Both are class so first put dot(.) before it...
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55375446%2fbootstrap-modal-not-working-after-clicking-button%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your current selectors ( "quit_Modal" and 'btnClose') with no class .
or identifier #
signs will refer to tags, so the jQuery will search for tags with the name of <quit_Modal>
and <btnClose>
in your DOM.
You're missing the selectors sign (dot .
and #
):
$("#quit_Modal").modal('show');
$('.btnClose').trigger('click');
NOTE: The quit_Modal
should be an id id="quit_Modal"
.
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
1
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
add a comment |
Your current selectors ( "quit_Modal" and 'btnClose') with no class .
or identifier #
signs will refer to tags, so the jQuery will search for tags with the name of <quit_Modal>
and <btnClose>
in your DOM.
You're missing the selectors sign (dot .
and #
):
$("#quit_Modal").modal('show');
$('.btnClose').trigger('click');
NOTE: The quit_Modal
should be an id id="quit_Modal"
.
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
1
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
add a comment |
Your current selectors ( "quit_Modal" and 'btnClose') with no class .
or identifier #
signs will refer to tags, so the jQuery will search for tags with the name of <quit_Modal>
and <btnClose>
in your DOM.
You're missing the selectors sign (dot .
and #
):
$("#quit_Modal").modal('show');
$('.btnClose').trigger('click');
NOTE: The quit_Modal
should be an id id="quit_Modal"
.
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
Your current selectors ( "quit_Modal" and 'btnClose') with no class .
or identifier #
signs will refer to tags, so the jQuery will search for tags with the name of <quit_Modal>
and <btnClose>
in your DOM.
You're missing the selectors sign (dot .
and #
):
$("#quit_Modal").modal('show');
$('.btnClose').trigger('click');
NOTE: The quit_Modal
should be an id id="quit_Modal"
.
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
jQuery(document).ready(function(e)
$("#quit_Modal").modal('show');
setTimeout(function()
$('.btnClose').trigger('click');
, 1000);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="quit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 btnClose" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Button</button>
</div>
</div>
</div>
</div>
edited Mar 27 at 11:11
answered Mar 27 at 10:55
Zakaria AcharkiZakaria Acharki
58.4k13 gold badges45 silver badges74 bronze badges
58.4k13 gold badges45 silver badges74 bronze badges
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
1
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
add a comment |
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
1
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
1
1
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
Check my updated sample.
– Zakaria Acharki
Mar 27 at 11:11
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
It works Thank u
– krishna priya prasannan
Mar 27 at 11:27
add a comment |
Your selector is wrong.
Instead of:
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
use this:
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
add a comment |
Your selector is wrong.
Instead of:
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
use this:
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
add a comment |
Your selector is wrong.
Instead of:
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
use this:
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
Your selector is wrong.
Instead of:
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
use this:
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
answered Mar 27 at 10:56
XanderXander
6571 gold badge6 silver badges19 bronze badges
6571 gold badge6 silver badges19 bronze badges
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
add a comment |
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:02
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
Try this link for all type of bootstrap modal and check it your modal: getbootstrap.com/docs/4.0/components/modal
– lucky
Mar 27 at 11:08
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
When I removed the button click to popup modal its started not working
– krishna priya prasannan
Mar 27 at 11:13
add a comment |
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
Both are class so first put dot(.) before it...
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
add a comment |
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
Both are class so first put dot(.) before it...
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
add a comment |
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
Both are class so first put dot(.) before it...
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
$("quit_Modal").modal('show');
$('btnClose').trigger('click');
Both are class so first put dot(.) before it...
$(".quit_Modal").modal('show');
$('.btnClose').trigger('click');
answered Mar 27 at 10:57
luckylucky
1121 gold badge3 silver badges16 bronze badges
1121 gold badge3 silver badges16 bronze badges
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
add a comment |
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
but after edit still its not working
– krishna priya prasannan
Mar 27 at 11:01
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55375446%2fbootstrap-modal-not-working-after-clicking-button%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
did you add bootstrap css?
– Devsi Odedra
Mar 27 at 10:55
add the
JQuery
part under(document).ready()
function and provide right selector.quit_Modal
– Aarif
Mar 27 at 10:55
not added bootstrap
– krishna priya prasannan
Mar 27 at 11:10
tried jquery stil not working
– krishna priya prasannan
Mar 27 at 11:11