3

I only want the Modal to show when I click on a certain button.

At the moment, the Modal shows itself whenever I load the page.

Can someone please tell me where I am going horribly wrong?

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div>

I am using ASP.NET MVC 3

EDIT: I only have the following as the Javascript:

 <script> $('#myModal').on('show', function() { }); </script>

These are my references to CSS and JS:

 <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <script [email protected]("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") type="text/javascript"> </script> <script [email protected]("../../Content/lib/bootstrap/js/bootstrap.min.js") type="text/javascript"></script> <link [email protected]("/Content/lib/bootstrap/css/bootstrap.min.css") rel="stylesheet" type="text/css" /> <link [email protected]("/Content/lib/bootstrap/css/bootstrap-responsive.min.css") rel="stylesheet" type="text/css" /> <link [email protected]("../../Content/lib/bootstrap/css/bootstrap-combobox.css") rel="stylesheet" type="text/css" /> </head>
Improve this question
2
  • What browser is this on? We've seen it happening on Android [Opera/Browser], but haven't seen it anywhere else. Commented Sep 21, 2012 at 9:34
  • Bootstrap modal works ONLY with Javascript - if you don't have the Bootsrap Javascript - then the Modal will be shown, since it's the Javascript that hides the Modal div. Commented Sep 21, 2012 at 9:38

6 Answers 6

Reset to default
4

Add .hide class to the modal:

<div class="modal hide fade"> ... </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

By doing so when button is clicked it shows only a blank screen
<div class="modal hide" id="myModal"> THis code works for me, Your code didnt work sorry
This worked perfectly for me, I had the same problem as the OP! Thanks simbirsk
This will work but if it doesn't check to make sure 'fade' is available in your project,
2

No need to use any javascript if you do not want your modal to show in page load just use the below code to create a simple modal in Bootstrap 

 <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <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-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <h1>Hello World!</h1> </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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
Improve this answer

Comments

1

To get the modal to work you should include:

  • jquery
  • bootstrap-min.js

Bootstrap uses the custom attributes in the modal to find and apply the javascript functionality. You do not need to write the binding yourself.

Improve this answer

3 Comments

Looks OK at first glance but why don't you use the @Url.Content method creating urls to your content files? Also check the javascript console of chrome (CTRL+SHIFT+J) for any javascript related errors.
Everything looks perfectly fine. Still don't understand why it is showing on Page Load :(
You've replaced the hardcoded include urls with the @Url.Content method? Because it doesn't make sense that you use both: href="/Content and src="../../Content. Those paths are clearly not the same.
1

I know I'm late on this, but this is the discussion thread that shows up in Google Search for "Bootstrap Modal dialog automatically showing on Page Load" issue and hence submitting my answer here.

The Bootstrap links in the given code show that Bootstrap v2.x libraries are in use here. Try version 3 and you won't face this issue.

The documentation for v2 version of Bootstrap says...

Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.

All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

The suggested code to add to your page is...

 $('#myModal').on('show', function (e) { if (!data) return e.preventDefault() // stops modal from being shown });

Try this if you're really forced to use Bootstrap v2.x for your project. But I'd still insist to use v3.x of Bootstrap to avoid these issues.

Improve this answer

Comments

-1

Button TO launch modal code

<div class="modal hide" id="myModal"> Hide Modal COde

Your Modal Code HERE*Header of modal , body,footer, etc

</div>
Improve this answer

Comments

-2

Bootstrap modal works ONLY with Javascript - if you don't have the Bootsrap Javascript - then the Modal will be shown, since it's the Javascript that hides the Modal div.

Please include the bootstrap javascript and check.

Improve this answer

2 Comments

Can you please show me with the Javascript how to make the Modal launch on a button Click? I'm unsure of what you mean. I am referencing the Javascript i.e. bootstrap.mins.js but I have not included the <script> tag for handling any user interaction for the Modal.
If you've included the bootstrap.min.js that should be sufficient.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.