Im trying to open a modal when an image is clicked with this code:
<img class="featurette-image pull-right" src="http://i.imgur.com/96C9Nij.png">
<div class="modal fade" id="download" tabindex="-1" role="dialog" aria-labelledby="downloadlabel" 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">×</button>
<h4 class="modal-title" id="downloadlabel">Download & Install Pixelmon</h4>
</div>
<div class="modal-body">
<p>
<strong>Installing Pixelmon</strong><br /><br />
First, you'll need to install Forge, so simply double-click "minecraftforge-installer-x.x.x-x.xx.x.xxx" and a menu will pop up for you to install forge.
</p>
<p>
Once you have done that its recommended you open the minecraft launcher, create a new profile, and select the forge version from the version dropdown.<br>After this launch minecraft and check if forge is running properly.
</p>
<p>
Now that forge is installed, you only have to copy "Pixelmon x.x.x.zip" to your %appdata%\roaming\.minecraft\mods folder.
</p>
<p>
You will need to use the previously created profile ( the forge profile ) to play with Pixelmon.
</p>
<p>
Now that you have Pixelmon installed, you may beggin your adventure on play.pokemasters.org
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger">Download Pixelmon</button>.
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The thing is its not appearing when I click the image.
Have you tried, $('#download').modal("show"); ?
There are more than one way to show or popup your modal.
You can show your modal with out using script or onclicks.
Here is the Example:
<a href="#" data-toggle="modal" data-target="#download">
Now in modal give id same as you wrote in data-target which is already done in your code 2nd use class="popup" instead of your current class,
<div id="download" class="popup">Your modal items/elements </div>
this approach will ease you with extra coding and time.
You can also show or popup your modal with the use of onclick property,
here is an Example:
<a href="#" onclick="showmodal()" data-toggle="modal" data-target="#download">
Modal
<div id="download" class="popup">Your modal items/elements </div>
Script
here just call your modal by id with .modal property to show or popup.
function showmodal()
{
$("#download").modal("show");
}
I hope it will help you and others in future.
Tip :You can use both data-target and onclick for one modal as well.
Related
I am designing an eCommerce website using woocommerce and Flatsome Theme in WordPress. I'm planning to deliver fruits and vegetables only in two cities.
Now I want a popup when someone arrives at my website which asks Select where you want to deliver and it gives the option for two cities only. When users select one option that selection must be placed in the header.
I tried a bootstrap modal for it. and it is working fine. Now when the user selects a product and moves to the product page that pop up appears again which is not comfortable. I just want it to appear on the home page and the selection a user made there must remain on any other page he/she moves.
If someone has a better idea to perform such function, please share or if you have a solution in this program then it will be appreciated.
HTML code is
<img style="height:20px;" src="logo.png" >
<a type="button" id="hash" class="btn" data-toggle="modal" data-target="#exampleModalCenter">
Select Your Location
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="hasha">Select Your Location</h5>
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button> -->
</div>
<div class="modal-body text-center">
<div class="row">
<div class="col-md-6">
<a id="btnsave" ><img style="height:80px;" src="tajMahal.png" ></a>
<p id="first">Indirapuram</p>
</div>
<div class="col-md-6">
<a id="btnsaveone" ><img style="height:80px;" src="mumbai.jpg" ></a>
<p id="firstone">Faridabad</p>
</div>
</div>
</div>
<div class="modal-footer">
<p> ©2020 Grofers Inc.</p>
</div>
</div>
</div>
</div>
You can use session or cookies to save the choise. On bootstrap, following the Usage section
$('#exampleModalCenter').modal({show: false})
Then, on each page (products, orders etc...) you can check through session or cookies if a country choice exists, otherwise:
$('#exampleModalCenter').modal('show');
I have a modal window but when I close the modal my page is blocked. I can not do anything. I need to refresh the page to get everything working again!
The strange is that sometimes everything works well or sometimes everything is blocked!
The button that opens the model:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalCode">Approve</button>
My modal window code:
<!-- Modal-->
<div class="modal fade" id="myModalCode" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form id="formUpdateProgress" >
{!! csrf_field() !!}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Complaint Progress</h4>
</div>
<div class="modal-body">
<label class="control-label">Insert code:</label>
<div id='complaintProgress' style="position: relative;">
<input type="text" name="code" id="code" placeholder="Insert the code here">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- END MODAL -->
When I submit the form, I close the model!
$( '#formUpdateProgress' ).on( 'submit', function(e) {
$('#myModalCode').modal('hide');
});
EXAMPLE:
Modal window in my application:
Then I click Submit, everything works ok, the document is approved but something is locking the page:
Any idea why the page is blocked? Thanks in advance
Similar issues is discussed in here:
How to hide Bootstrap modal from javascript?
Seems that you have some issues in the way how your modal is handling the submit. Perhaps the easiest fix would be as was mentioned in one of the comments from the link above, add the following fix to remove the backdrop:
$('.modal-backdrop').hide();
Alternatively, you may even remove() it. I'd think, modal will re-create it again, if open.
It's looks like you are using bootstrap modal.
Bootstrap open not only modal, but page mask too. So you need to call bootstrap method to close. With code inspector you can find that body got class="modal-open" and extra div with "modal-backdrop fade in"
Just use <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> or yr element with 'data-dismiss="modal"' and all be ok)
function closeModal(name){
$("#"+name).modal('hide');
// I added the next line
$('.modal-backdrop').hide();
}
After I add the $('.modal-backdrop').hide(); everything its ok :)
I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong
I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.
I am looking for jQuery modal popup which should display image like sample check to show routing number etc,.. When I click on a Routing number(?)question mark it should pop-up an image and should have closing button on the top right corner. I have seen different approaches but couldnt find exact one
Check out the Bootstrap Modal. Click the Launch demo modal button.
In <head> make sure you include the javascript for jquery and bootstrap.js. You can download bootstrap.js from the bootstrap site. You also might want to include the bootstrap.css as well.
Once your <head> is all setup, in your body you need to add the modal code which will be hidden and you'll need to add a button to show the modal. The button and modal are linked together by id.
<!-- 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">
<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>