Develop Reference

show popup dialog box in asp net using js not working

i want to show popup dialog box in asp net using js but it not working!
here is my code
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal" id="myModal" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The behaviour: when i click the button, the popup dialog not shown and the page become disabled(gray shadow).
when i remove ( class= "modal"), it shown put also everything is disabled!!!

Did you add bootstrap.min.css, jquery.min.js, bootstrap.min.js in the view or the main layout?

How to close modal popup only when pressing the cancel button?

I have a simple modal and I was wondering how can I only allow the modal to be closed when clicking the "X" button or the cancel button. Now when the user clicks outside the modal area.
Here's my code:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

use this..
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
or directly put it in your div
<div id="myModal" class="modal hide" data-backdrop="static" data-keyboard="false">

Using Bootstrap 3, is there a way to reuse the same HTML for different media queries to practice DRY?

I've been reading Bootstrap 3's documents about modals, and it makes sense to use this HTML for the modal content. I'd be creating this modal on mobile:
<!-- Button trigger modal -->
<button type="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">
<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" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My question is, I'd want to reuse the HTML inside the body of the modal for a sidebar on the desktop media query. How would I do so without repeating the HTML for a second time as a completely different div that simply contains the exact same content?

display a Modal or a dialog when a button is clicked in infowindow in javascript?

I have to display a new modal when a button is clicked in the infowindow. When I click MORE button in info window a modal should appear with more information regarding the marker while disabling the background.
I have tried in the following way but it is not working:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have added a button in info window to display the modal:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
But the above code is not working.

Can twitter bootstrap been set nesting?

I want to make a sub modal in a main modal.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">
Main contant
<!-- Button to trigger modal -->
Launch sub demo modal
<!-- Sub Modal -->
<div id="subModal" class="modal hide fade" 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">
Sub contant
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The problem is that when I close the sub modal,the main modal was closed together.
Can I set the close event for every modal on one's own?

You don't need to have each modal nested on the parent modal. To you archive what you need, separe the modals, so each node modal will have it own close data-dissmis attribute, and when triggered it will dissmis only that modal. (And as you need to work with submodals, it will fit your needs, because even with separete html trees, the submodal will be called above the main modal, or the first one)
Heres the fiddle example ( The HTML are a bit desorganized, sory about that ):
http://jsfiddle.net/h3WDq/202/
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
Launch Modal
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</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>
</div>
<style>
As i said, you going to create two modals separated, and each one will have its own data-dismiss button, and when them get called, they will just close that specific modal, and as you can see in my example they work as submodals.