I am trying to get a simple bootstrap's modal sample to work, I follow this document which says " You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, ...", but I have done whatever I could and had a huge amount of research still can not get this simple modal to work.
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
I have either this:
<a class="btn" data-controls-modal="myModal">Launch Modal</a>
or this:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
button to activate the modal, I have loaded the bootstrap-modal.js on the page as well. Unless I added a javascript line to handle the "Launch Modal" click event, when I click on "Launch Modal", nothing happens at all, are there anything that I have missed?
I finally found this solution from "Sven" and solved the problem. what I did was I included "bootstrap.min.js" with:
<script src="bootstrap.min.js"/>
instead of:
<script src="bootstrap.min.js"></script>
and it fixed the problem which looked really odd. can anyone explain why?
Fiddle 1: a replica of the modal used on the twitter bootstrap site.
(This is the modal that doesn't display by default, but that launches when
you click on the demo button.)
http://jsfiddle.net/9RcDN/
Fiddle 2: a replica of the modal described in the bootstrap documentation,
but that incorporates the necessary elements to avoid the use of any javascript.
Note especially the inclusion of the hide class on #myModal div, and the use of data-dismiss="modal" on the Close button.
http://jsfiddle.net/aPDVM/4/
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close<!-- note the use of "data-dismiss" -->
Save changes
</div>
</div>
It's also worth noting that the site you are using is running on bootstrap 2.0,
while the official twitter bootstrap site is on 2.0.3.
Also have a look at BootBox, it's really simple to show alerts and confirm boxes in a bootstrap modal. http://bootboxjs.com/
The implementation is as easy as this:
Normal alert:
bootbox.alert("Hello world!");
Confirm:
bootbox.confirm("Are you sure?", function(result) {
Example.show("Confirm result: "+result);
});
Promt:
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
And even custom:
bootbox.dialog("I am a custom dialog", [{
"label" : "Success!",
"class" : "btn-success",
"callback": function() {
Example.show("great success");
}
}, {
"label" : "Danger!",
"class" : "btn-danger",
"callback": function() {
Example.show("uh oh, look out!");
}
}, {
"label" : "Click ME!",
"class" : "btn-primary",
"callback": function() {
Example.show("Primary button");
}
}, {
"label" : "Just a button..."
}]);
I had an issue with Modals as well. I should have declare jquery.min.js before bootstrap.min.js (in my layout page).
From official site : "all plugins depend on jQuery (this means jQuery must be included before the plugin files)"
I run into this issue too. I was including bootstrap.js AND bootstrap-modal.js.
If you already have bootstrap.js, you don't need to include popover.
For me the bootstrap modal was showing and disappearing when I clicked the button tag (in the markup the modal is shown and hidden using data attributes alone). In my gulpfile.js I added the bootstrap.js (which had the modal logic) and the modal.js file. So I think after the browser parses and executes both the files, two click event handlers are attached to the particular dom element (one for each of the files), so one shows the modal the other hides the modal. Hope this helps someone.
Try skipping the p tag or replace it with a h3 tag or similar. Replace:
<p>One fine body…</p>
with
<h3>One fine body…</h3>
It worked for me, I don't know why, but it seems the p tag is somehow not fully compatible with some versions of Bootstrap.
A better solution is to load a twisted version of bootstrap.js without jquery. Get it from http://daniemon.com/blog/bootstrap-without-jquery/
<script src=".../bootstrap-without-jquery.min.js"></script>
Going this way will save you trouble from script tags.
Also,
If you're running your page from Visual Studio and have installed the bootstrap package you need to make sure of two things
That you've also gotten the Bootsrap Modal Dialog package (very important)
You've added it to bundle.config if you're using bundling.
I was having this same problem using Angular CLI. I needed to import the bootstrap.js.min file in the .angular-cli.json file:
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"],
A simple way to use modals is with eModal!
Ex from github:
Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
use eModal to display a modal for alert, ajax, prompt or confirm
// Display an alert modal with default title (Attention)
eModal.alert('You shall not pass!');
You must call your Bootstrap jQuery plugin so that it will trigger.
<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
<div class="modal-dialog modal-lg" 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>
</div>
<div class="modal-body">
<div class="col-lg-6" >
<p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
<p class="price-para">
<span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
<span class="price-cls" ng-bind="cartModal.product.p_price"></span>
</p>
<p class="select-color">
<span ng-repeat="color in cartModal.product.p_available_options.colors">
<button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
</span>
</p>
<br>
<p class="select-box">
<span class="size-select-cls">
SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
item.name for item in items"></select>
</span>
<span class="qty">
QTY:<input type="number" min="1" ng-model="cartModal.selectedQty"/>
</span>
</p>
<p class="edit-button">
<button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
</p>
</div>
<div class="col-lg-6">
<img ng-src="{{cartModal.product.imageSrc}}">
</div>
</div>
</div>
</div>
</div>
Related
hello everyone i need help. i wanna show dinamic data to bootstrap modal body.
here is my code so far :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
url : 'det_registration.php',
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
the modal windows is open. but, the ajax code is not execute for call det_registration.php and fetched data
what i missed ? thanks for your help :)
update:
i am sorry all. this is the code how i call the modal
<a title='detail' href="#myModal" data-toggle='modal'><span class="pull-left">View Details</span></a>
Not sure exactly what else you have in your code but take a look here.
I've added a button calling to your modal. With the code you provided, it all seems to be working just fine to me.
This was all I added
<button data-toggle="modal" data-target="#myModal" class="btn brn-primary">Click Me</button>
I know this is just a peace of code but please provide more information. In this case I don't know how you are opening the modal, this could be the problem.
Your script looks fine, if the ajax function was not executed is because your modal lister could't "listen" the event "show.bs.modal" try to put an alert just after the opening of the anonymous function to test it.
If you could't see the alert is because the event was not listened.
Finally, if you are opening the modal via JS, just remember that the function that opens it must exist before it was executed.
i have solved my problem. the problem is there is two jquery.js in my php file. the first one is bootsrap jquery.js and the another one is datatable jquery.js. then after i deleted datatable jquery.js, my problem was solved
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 was looking through the docs of materializecss. But the modal seems not working. I just used the code that was in the docs http://materializecss.com/modals.html
Html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
I had put a pen as well
Codepen link
According to the docs - initialising .modal() allows on-click to function properly on the anchor.
$('#modal1').modal()
you'll get the modal to show onclick - (trying to debug for on ready)
--- update ---
on Codepen, there's a weird delay:
I got it work in $(document).ready by using
$('#modal1').modal().modal('open');
(It's not an elegant solution, but it seems to work);
CODEPEN
use .show() for displaying elements with jQuery.
$(document).ready(function(){
$('#modal1').show();
});
OR on click
<a class="waves-effect waves-light btn">Modal</a>
$('.btn').on('click', function(){
$('.modal').show();
});
I was wondering how to implement a popup div that had its own address. The example in question is the Chrome Extensions Store: https://chrome.google.com/webstore/category/extensions
If you click a tile on that site, not only will the content pop up in form of a div, but it'll also have its own address. So if I copy the address and paste it onto a new window, it goes to the same popup. Not only that, if you click back button (or backspace), it closes the pop-up div instead of going back to previous page.
If there is no simple way to implement this, I'd like to know what javascript object or something I'd have to learn about to do this.
I'm not sure if this is the right S.E. forum to ask, but I had to ask someone.
You can use bootstrap modal. It's very good
here is the code,
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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 didn't see the link you are talking about but I think they are hack the behavior of the link and instead of going to the clicked url show it'e content on an popup div. in jquery you can do it by something like preventDefault
If you click a tile on that site, not only will the content pop up in
form of a div, but it'll also have its own address. So if I copy the
address and paste it onto a new window, it goes to the same popup.
This is called stateless UI which can easily be achieved with for example router in Angular or Ember.
The idea is that every state in your application has its own address. If for example, your application has an entity user then the url to see a specific user would be
http://example.com/user/12345
Where 12345 is userId
At the same time to open an edit form for this object you might use
http://example.com/user/12345/edit
Irrelevant of when you get to the latter, your application will always open an edit form for user with id=12345
To understand this better you need to get acquainted with some principles of MVC and perhaps examine ui-router tutorial as an example of implementation
Any modal that I am creating using twitter bootstrap fails to appear. I'm not sure what I'm doing wrong seeing that I set up a test modal using the code that bootstrap provides and it still doesn't work.
Here is my code (body only):
You need to link to bootstrap.js, bootstrap-modal.js, jquery.js, and bootstrap.css
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
Modal body would go here...
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a data-toggle="modal" href="#myModal">Show Modal</a>
</body>
And here are links to the bootstrap package and jquery that a bootstrap modal needs:
bootstrap package
jquery
My problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked.
You have to call:
<script>
$('#myModal').modal('show')
</script>
After the </body> tag. Or if you only want to call it when the user clicks on something:
$('#button_id').click(function(){
$('#myModal').modal('show')
});