I like the Bootstrap library by Twitter and I would like to try to use into it in my simple page. I need there after loading the page automatically display the modal window. Could anyone give me a tip, how is possible to do it?
well that shouldn't be too hard... do something like this:
jQuery(document).ready(function($) {
$('#my-modal').modal(options)
});
Your modal...
<div class="modal fade" id="formSaludo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
If ulike modal opened... Use style="display: block;" and class="modal fade in"
<div class="modal fade in" id="formSaludo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
This modal load when the page is ready.
<body>
<div id="top">
<a tabindex="-1" href="#" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
</div>
<div id="modal" class="modal hide fade in" style="display:none;">
<div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
<div class="modal-body"></div>
<div class="modal-footer">footer</div>
</div>
<script>
$(document).ready(function() {
$('#top').find('a').trigger('click');
});
</script>
Best regards.
Related
In Laravel 8 app, I'm using a model to add items. In my view file, I'm doing it as follows
Create new item
<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
.... <form comes here>
</div>
</div>
</div>
As said, this works for adding items.
I now also want to use a similar logic for editing items. So I have added the following on my page
<em class="fa fa-pencil"></em>
<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
.... <form comes here>
</div>
</div>
</div>
The problem however is that I need to pass the id of the current item (I wish to edit) to the modal box so that the modal can display the values for the item I wish to update.
How can this be done?
You can usedataattribute to pass some data into Bootstrap modal.
Buttons in the loop
#foreach()
<a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>
#endforeach
Bootstrap model
<div class="modal hide" id="UserDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="user_name" id="user_name" value=""/>
</div>
</div>
And little JavaScript
$(document).on("click", ".user_dialog", function () {
var UserName = $(this).data('id');
$(".modal-body #user_name").val( UserName );
});
That's it
Little demo here : http://jsfiddle.net/Au9tc/6247/
Bootstrap Modal does not load after page has been refreshed certain times.
After that, the modal will only show up when I open the page in incognito.
Does anyone have any fix for this bug?
You can go to the actual site to see for yourself: http://www.petalandco.com.au/
js:
jQuery(window).load(function(){
setTimeout(function(){
var hiddenmodal = getCookie('hiddenmodal');
if (hiddenmodal == "") {
jQuery('#popupNewsletterModal').modal('show');
}
}, 100);
HTML:
<!-- Modal -->
<div class="modal fade" id="popupNewsletterModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:679px;height:439px;">
<div class="modal-content" style="<?php echo ($style);?>">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background: rgba(0,0,0,0);top:0px;">
<span aria-hidden="true" style="color:#000;font-size:40px;">×</span>
</button>
<div class="modal-body">
<div class="widget popupnewsletter-widget heading__center">
In rails 4, I am using bootstrap plugin. When I am using modal feature there is close event issue which I need to solve. When modal opens, it should get close when I click on 'x' icon or 'Esc' button otherwise it should be open always. Right now when I click on the screen which excludes the modal form area it will get close.
In main.erb,
<div class="modal fade" id="main-lightbox-container" tabindex="-1" role="dialog" aria-labelledby="main-lightbox-container" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
In form.js.erb,
var content = "<%= escape_javascript(render(:partial=>"form", :locals=>{:user=>#user})) %>";
var container = $('#main-lightbox-container');
container.find('.modal-content').html(content);
container.modal({});
Here I am loading modal form via ajax request. How can I fix this on-screen click issue? Please help me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<div data-toggle="modal" data-target="#modalid">Open</div>
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body" style="background-color: #F0F0F0">
Content
</div>
</div>
</div>
<div id="myModal" data-keyboard="false" data-backdrop="static">
just add data-keyboard="False" and data-backdrop="static" it works for me.
I'm novice in web programming yet but I' m trying to learn :)
I want to hide a modal to show another modal("Please wait screen"),to wait for a function call to end (loadData()). But the first modal gets hidden and then the screen fades until function ends and only then the "Please Wait" modals appears.
Any help is welcome.
Ps: Sorry for my bad english...
HTML
First modal
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<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>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body">
<button type="button" id= "btn1" class="btn btn-primary" data-target="#modal1">Click</button>
</div>
</div>
</div>
</div>
The second modal
<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span class="glyphicon glyphicon-time">
</span> Processing data...
</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-info
progress-bar-striped active"
style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
loadData();
});
Bootstrap's modal class exposes a few events for hooking into modal functionality.
show.bs.modal
This event fires immediately when the show instance method is called.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal
This event is fired when the modal has loaded content using the remote option.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$('#modal1').on('hidden.bs.modal', function (e) {
$("#myPleaseWait").modal("show");
});
loadData();
});
For more details refer Bootstrap Documentation
Thanks #sri, with your explanation I could resolve it.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
$('#myPleaseWait').on('shown.bs.modal', function (e) {
loadData();
});
});
I am trying to .load() a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!
Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.
Here is my function:
$(function () {
$('.team').on('click', function () {
var target = $(this).data('target');
$('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) {
if (status === "success") {
$(target).modal({ show: true });
}
});
});
});
Here is the html anchor and example modal:
<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>
Data held in external file team-players.html:
<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<p>Player 1: Ronaldo</p>
</div>
</div>
</div>
$(function(){
var url = "url of the modal window content";
$('.my-modal-cont').load(url,function(result){
$('#myModal').modal({show:true});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Window Container -->
<div class="my-modal-base">
<div class="my-modal-cont"></div>
</div>
<!-- Modal Window content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Instead of $($this).modal({ show: true }); try $(this).modal('show');
To hide the modal, you can use $(this).modal('hide');
You can do $(this).modal("toggle") if it open it will close and vice versa.
jQuery .load() bootstrap modal and show
for show $(#ID).modal('show');
for hide $(#ID).modal('hide');