I have this modal and I want it to appear (pop up) automatically when the page finishes its load event.
<div id="myModal" class="modal fade in" tabindex="-1" data-show>
<div class="modal-header" style="background: #5cb85c;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel" style="color: #fff;">HEADER TEXT</h3>
</div>
<div class="modal-body">
<p style="font-size: medium;">SOME TEXT HERE</p>
</div>
<div style="text-align:right; padding-right:15px;">
<button id="buttonEvent" class="btn btn-primary" style="background-
color: #ec9c51; border-color: #ec9c51;" target="_blank">BUTTON TEXT
</button>
</div>
</div>
But I have a problem: I can't use jQuery and I need the Close Button to work properly.
Related
For those code, there have a button "Launch modal" to open the Model, then in Model, also have a button "Launch modal2" to open a new model(just call model2) on Model. When I click the close button on model2, all of the Model will de dismiss. How can I fix that?
Please note that I need to put model2 in Model for display data.
Thanks.
http://jsfiddle.net/ve42xs6w/
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal2</a>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
The problem is that you are putting the second modal inside of the first modal. Bootstrap just closes all modals that the close button is inside of, so if you nest them the second close button will close all outside modals.
To fix this you can just move the whole div#myModal2 down under the first div#myModal so they are separate elements.
Like this: http://jsfiddle.net/e92o1j3s/3/
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?
I am working on a web page where i am using bootstrap drop down and modal popup.
I am placing the modal popup inside drop down div. The popup is opening and working perfectly.
What issue i am getting is whenever i resize the window, modal popup is getting hidden when window comes to its minimum width.
I want the popup to stay on page.
Below is the code:
<div class="btn-group dropdown">
<button type="button"
id="btnCalculate"
data-toggle="dropdown"
class="dropdown-toggle">
Calculate
</button>
<div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
<div class="col-md-12">
<row>
<label class="control-label">Test</label>
<button name="getBalance"
type="submit"
data-toggle="modal"
data-target="#myModal"
class="btn btn-default"
>
Balance
</button>
</row>
</div>
<!-- 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>
</div>
Thanks
Attach the modal to <div class="container"> tag directly, not to the dropdown menu.
Just like the following:
<div class="container">
<div class="btn-group dropdown">
<button type="button"
id="btnCalculate"
data-toggle="dropdown"
class="dropdown-toggle"> Calculate </button>
<div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
<div class="col-md-12">
<row>
<label class="control-label">Test</label>
<button name="getBalance"
type="submit"
data-toggle="modal"
data-target="#myModal"
class="btn btn-default">
Balance
</button>
</row>
</div>
</div>
</div>
<!-- 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>
It is not prefarble to place modals within low-level position such a dropdown menu. See how modals work
Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
However, if you insist to keep your modal within the dropdown menu, you need to prevent the dropdown menu from being closed when the modal is called, and ensure it is placed on the top of .modal-backdrop
JS code:
$('.dropdown').on('hide.bs.dropdown', function () {
return false;
});
and add z-index:auto to dropdown-menu style
I want to show modal when it clicking "reportpet" but it not displaying modal. How can I resolve this error please help me.
URL:
http://newseinstein.com/Rwork/index.php/Pet/view/104
HTML:
<span class="text">
Report
</span>
Modal Code:
<div class="modal fade" id="locationreport" role="dialog" style="display: none;">
<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>
JS code:
$("#reportpet").click(function(){
$("#locationreport").show();
})
Change your data-target to data-target="#locationreport" you need to add # before the id of the modal
<span class="text">
Report
</span>
See bootply
This is my button-style anchor tag:
<a id="1" class="data btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data'); reply_click();" type="button" value="1">Abc(1).txt</a>
<a id="1" class="data btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data'); reply_click();" type="button" value="1">Abc(2).txt</a>
<a id="1" class="data btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data'); reply_click();" type="button" value="1">Abc(3).txt</a>
With the script used for Bootstrap modal:
function showModal(data){
reply_click();
function reply_click(){
var idd = event.srcElement.id;
var title = document.getElementById(idd).text;
$("#myModal .modal-title").html(title);
$("#myModal .modal-con").html("paharagraph");
$("#myModal").modal();
}
}
This is a Bootstrap modal:
<div class="modal modal-wide 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">Title</h4>
</div>
<div class="modal-body">
<div class="col-md-7 modal-con" style="border: 1px solid grey;">
hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-md-5 modal-cont" style="border: 1px solid grey;">
hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I wanted to open different text file with click of different button created with anchor tag in modal-body. What should I do as I have tried all the methods but not getting anything. I want to open a file without using input box in modal-body using JavaScript.
Use ajax for load external file :
click here for demo