I have several Modals on the same page, but they are only showing intermittently. The Models are trigged by this script.
$(".embed").on("contextmenu", function(e) {
e.preventDefault();
var targetModal = $(this).data('target');
$(targetModal).modal("show");
})
HTML is
<div class="embed" data-target="#embed0">
<img src="images/stakeholder-interest.png" alt="Analyse stakeholder interest"/>
</div>
Modal html is
<div id="embed0" class="modal" 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>
</div><!--END model-header-->
<div class="modal-body">
</div><!--END model-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
</div>
</div><!-- end modal-content-->
</div><!-- end modal-dialog-->
</div><!-- END embed0 1st image-->
SumoMe Highlighter is the culprit. Turning the Highlighter off allowed the modals to be shown on every image, correctly and consistently. Suspect SumoMe CSS which is applied on page load is intefering with other page elements.
Related
The bootstrap popup is not showing up on my website. I have copied the popup code from the official Bootstrap website.
Here is the link to my website Link to webiste
The popup button is located before the footer credits.
Current condition :
Query Bootstrap Modal is not working
Below code is copy pasted from your give url http://home.india-market.online/
It is working properly in separate example
Solution:
You have footer, <footer class="footer-social-icon text-center section_padding_70 clearfix">
Some how there is z-index:-101; and position:fixed; in <footer>
You need to remove model outside from <footer> and apply directly before </body> tag ends.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I hope it will start working normally.
Old Code from website is :
The reason is that modal content is placed (nested) inside footer element. Move that modal div to body and modal will appear.
I have a model box designed in jquery on one of my pages, I wonder if it is possible to make this modal show a full dynamic php page?
You can use the load() function, which is very easy to use, and well documented : http://api.jquery.com/load/ . it loads a page in the selected element, your modal's body for example, just calling a url.
Use iframe for modal box
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Trigger Modal in iFrame</button>
<!-- Modal -->
<div class="modal 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="/user/dashboard" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Iframe src will have your dynamic page.
Include bootstrap.css and bootstrap.js
eg:,
<a data-toggle="modal" href="your_url content to show" data-target="#myModal">Click</a>
<div id="#myModal"></div>
Reference-http://getbootstrap.com/javascript/#modals
Use jQuery load() like this,
jQuery part
<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- A button on the page -->
<body>
<button>Fetch Page</button>
</body>
<!--
1. Attach click event to 'button' with jQuery on()
2. Create a modal box dynamically with append()
3. Load 'the_dynamic_page.php' with jQuery load()
-->
<script>
$('body').on('click','button',function(){
$('body').append("<div id='modal_box' style='border:1px solid #999;position:fixed;top:50%;left:45%;padding:0 0.75%;font-family:Calibri,Candara,Arial;'></div>");
$('#modal_box').load('the_dynamic_page.php');
});
</script>
the_dynamic_page.php
This page could simply display a text like 'Im in a Modal Box!' or something from db.
I used JavaScript to load Bootstrap Modal, $('#myModaltictacgame').modal(); with a HTML Form with input details in table so my modal code looks like this
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<span>my modal</span>
</div>
<div class="modal-body table-responsive">
<table...>
<form ....>
<input ...>
...
</form>
</table>
</div>..
..
</div>
So when I use select option Modal window should be open which is fine and showing all the input fields but its coming with a transparent black window, every thing on modal is visible but I can't select of input any detail, unless I open inspect element window on bottom of my browser so on top of inspect window coming with 2 inches gap to select my normal page, hard to explain but please check the attached pictures capture screen 1, capture screen 2
Your HTML structure should follow the structure as mentioned in the Bootstrap Document
<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" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
//put your stuff inside the modal-body div
<form ....>
<table...>
<input ...>
...
</table>
</form>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My modal is working fine if i add a button or link in my plugin submenu page to trigger the modal. But i want to load my modal on clicking on the submenu.When i clicked on the submenu it calls a function and tried using some javascript in those function to load it on page load.I have tried below options on my function head but not working
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
aslo this i tried:
$(document).ready(function () {
$('#memberModal').modal('show');
});
Can anyone help me with identifying my problem. I have searched already almost every possible solution.But what i think my problem is here the javascript is not loading in time thats why i am having this problem. But dont know how to fix this.
If anyone nedds so my whole function code is given below:
<?php
function sfb_create_form_page(){
?>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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"><h3>Choose Your Form</h3></h4>
</div>
<div class="modal-body">
Click
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Tab Content -->
<div class="modal fade" id="tabs" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<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 caps"><strong>Design Your Form</strong></h4>
</div>
<div class="modal-body">
<!-- Modal Body Here -->
<ul class="nav nav-tabs" id="tabContent">
<li class="active"><strong>HTML For Form</strong></li>
<li><strong>Edit Form Content</strong></li>
<li><strong>Button Style</strong></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details">
<!-- Tab 1 Content Goes Here -->
</div><!-- Tab 1 Ends Here -->
<div class="tab-pane" id="access-security">
<!-- Tab 2 Content Goes Here -->
</div> <!-- Tab 2 Ends Here -->
<div class="tab-pane" id="networking">
<!-- Tab 1 Content Goes Here -->
</div> <!-- Tab 3 Ends Here -->
</div><!-- Ends of Tab-->
</div><!-- End of Body -->
<div class="modal-footer"> <!-- Fooetr -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="">OK</button>
</div> <!--End of Fooetr -->
</div> <!-- End of modal content -->
</div><!-- End of modal Dialouge -->
</div><!-- End of Modal Tab -->
<?php
}// End of create page function
JS Fiddle
Just use:
$(document).ready(function () {
$('#myModal').modal('show');
});
And remember, its REALLY important to call first JQuery, and then Bootstrap.min.js
How can I open an section of html with an id using JS/JQuery?
Lets say the html I want to trigger with JS/JQuery is
<section class="modal--show" id="show"
tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="label-show">A modal</h2>
</header>
<div class="modal-content">
<p>Content.</p>
<div id="badgeselect">
</div>
<footer>
<p>Footer</p>
</footer>
</div>
</section>
I've tried using
$('#show').dialog('open');
which doesn't work. The only other consideration is, that the full code must also copy an image that the user clicks on (to activate show)
I have this at the moment, the only part not working is making the above code show on the page after the user has clicked the image.
$(document).ready(function() {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#show').dialog('open');
});
SaveMyBadge();
return false;
});
.dialog is not a native method available in JavaScript. If you want a modal out of the box then i recommend using a JavaScript Library which comes with such features built in. Twitter's bootstrap will be a good option.
To get started:
In your <head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Include this script after you include jQuery
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
HTML:
<!-- Modal Markup -->
<div class="modal fade" id="modal">
<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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
To launch the modal
$('#modal').modal({'show':true});
Bootstrap homepage
UPDATE:
$('.go').on('click', 'img', function(e) {
$(this).width(100).height(100).appendTo('#badgeselect');
$('#modal').modal({'show':true});
});
You are missing a closing div tag.
<div id="badgeselect">
is never closed. That could be causing some strange issues
Well you could just add a click listener to the img and change the css class of the section.
The css class could have display:block
and as you stated its a pop up you could set its position in your class along with other properties such as opacity or simply
document.getElementById("show").style.display = block;
OR
document.getElementById("show").className = "MyClass";
.MyClass{
display:block;
position:absolute;
top:50%;
left:50%;
margin-left:-width/2;
margin-top:-height/2;
opacity:0.8;
}
This should create a pop up like feature.