My php page took longer to load, I have a popup on click of some content in that page.
When I click the content the iframe in popup needs to be opened in popup, the popup opens instantly, but the iframe within the popup didn't open till the page finishes loading.
And while that time the popup is visible but blank;
How to open the iframe before loading finishes?
My code is something like this:
<a style="cursor:pointer" <?php
if (isset($_SESSION['u_id']) && $_SESSION['u_id'] > 0) {
?> href="redirect.php; ?>" <?php
} else {
?> href="iframesignin.php?signpopup=<?php
$encd = 'slr' . $fbanr['s_id'];
echo base64_encode($encd);
?>&id=<?php
echo $fbanr['s_id'];
?>&type=slr&mypage=<?php
echo $fullurl;
?>" data-featherlight="iframe" <?php
}
?> target="_blank" >
GO TO STORE</a>
Here the popup appears through data-featherlight="iframe"
use include/require function intead of iframe
<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>
<iframe src="testing1.php" width="200" height="200"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I hope this will help you
Related
I am trying to show a chart inside of a modal.
I am using Meteor with the maazalik:highcharts package. Initially, when the modal appears the chart is outside of the modal. As soon as I resize the window, the chart appears correctly inside the modal.
A button click event triggers:
$('#accountsDetailsModal').modal('show');
My modal sits in a template:
<template name="AccountsGraph">
<div id="accountsDetailsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close on-close" data-dismiss="modal">×</button>
<h4 class="modal-title">Accounts Details</h4>
</div>
<div class="modal-body">
<div id="container" style="width:100%;margin: 0 auto">
{{> highchartsHelper chartId="accountsDetails" chartWidth="100%" charHeight="100%" chartObject=accountsGraph}}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default on-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
EDIT: I replaced my click event handler and it worked.
$('#accountsDetailsModal').modal('show');
setTimeout(function(){
console.log("reflow");
$("#accountsDetails").highcharts().reflow();
},200);
add to your config object:
func: function(chart) {
setTimeout(function() {
chart.reflow();
}, 0);
}
I have two tabs First tab display me the details of employee whose age is less then 40 and the second tab display me the details of employee whose age is grater then 40 when I click the 1st tab and click the button show (whish is under 1st tab) pop up get generated for a form I have written it in bootstrap . But for the second tab when I click the button it only fades up no form is generated . When I used chrome debugger I found CSS for nodal fade is not getting generated automatically . I am new in Bootstrap please help me
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I had this problem myself and found the solution. Bootstrap uses the following CSS media query to disable the modal fade animation (and a number of other transitions and animations) in certain circumstances:
#media (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
According to MDN, "The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses." They have instructions there for changing this on various operating systems. (The Windows method worked for me: Settings > Ease of Access > Display > Show animations [On])
Please try to this format for design & modal work.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
http://getbootstrap.com/javascript/#modals
The seccond part, the modal part mus not be on the body. Move it just below the head ends, and before the body tag start.
<head>
.... //heade code here
</head>
MODAL HERE
<body>....
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
...more code here
</body>
Your button can be inside the body, but your modal code should be outside of the main section.
<html>
<head>
</head>
<body>
<main>
<!-- button to trigger modal -->
</main>
<!--modal code here -->
</body>
</html>
When click to show, bootstrap adds this HTML somewhere at the bottom of the page:
If you want you can add it manually and try:
<div class="modal-backdrop fade show"></div>
I am trying to accomplish a cool modal that slides down onto the page. I ran into a problem and do not know what it could be, but when I click the button the modal isn't being loaded at all even though the #CmapModal shows up in the url. Any idea as to why the modal is not displaying when I click it?
Code for modal:
<p><a data-toggle="modal" href="#CmapModal" class="btn btn-default"><b>View Map »</b></a></p>
</div>
<!-- Modal -->
<div class="modal fade" id="CmapModal" tabindex="-1" role="dialog" aria-labelledby="CmapModalLabel" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</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 -->
Not sure why you want to do this with only CSS and HTML.
Here is a working solution for you: http://jsfiddle.net/H4SDk/
I have added a short javascript code:
$( "#clickme" ).click(function() {
$( "#book" ).toggle("slow");
});
You can change the ID names yourself.
If I understood correct you just wanted the modal to show, right?
You have missed the class "hide" in your model div. Try this;
<div class="modal hide fade" id="CmapModal" tabindex="-1" role="dialog" aria-labelledby="CmapModalLabel" aria-hidden="true">
JSFiddle Example
My web application uses CodeIgniter framework and Bootstrap 3.0 and I am trying to display a form in my modal. I would like the labels to be on the same line as the input fields but adding form-horizontal to form or modal-body didn't seem to help.
Code segment below:-
<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomer" 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">Add Customer</h4>
</div>
<div class="modal-body">
<?php echo form_open('customer_data/add_customer', ['class'=>'form-horizontal']); ?>
<?php echo form_label('Name: ', 'name'); ?>
<?php echo form_input(['name'=>'name', 'id'=>'name', 'class'=>'form-control']); ?>
<?php echo form_label('Mobile: ', 'mobileNum'); ?>
<?php echo form_input(['name'=>'mobileNum', 'id'=>'mobileNum', 'class'=>'form-control']); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Add Customer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
I think you missed some function
<?php echo form_close(); ?>
or try this:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addCustomer">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="addCustomer" 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">
<!--form horizontal-->
<?php echo form_open('customer_data/add_customer', array('class'=>'form-horizontal')); ?>
<?php echo form_label('Name: ', 'name'); ?>
<?php echo form_input(array('name'=>'name', 'id'=>'name', 'class'=>'form-control')); ?>
<?php echo form_label('Mobile: ', 'mobileNum'); ?>
<?php echo form_input(array('name'=>'mobileNum', 'id'=>'mobileNum', 'class'=>'form-control')); ?>
<?php echo form_close();?>
<!--end 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>
</div>
</div>
I'm having trouble with displaying the modal for the specific image clicked on to view.
If i use a link with a class it will show all of the images in that album in seperate modals (have to close them all down). I want to show the appropriate modal for the image that I click "view" on so that it is corresponding.
If i set this to id and create an id in the top div it will display the first image in the album only, no matter what image i click on.
How could I solve this?
<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<!--This is for the 360 viewer-->
<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'"/>'?>
<!--360 viewer end-->
</div>
<div class="modal-footer">
<?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'">Download</a>'?>
</div>
</div>
One way to approach this is to store the various unique data components on each of the links and then have a generic handler which will load that data into the relevant elements of a single modal.
For instance, something along the lines of:
HTML
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i> View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<img id="snap"/>
</div>
<div class="modal-footer">
<a id="download" class="btn btn-link">Download</a>
</div>
</div>
Where you could load each image's data into the data attributes via PHP.
JS
$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
$('#snap').attr('src',$(this).data('image'))
$('#download').attr('href', $(this).data('download'))
})
This will load the appropriate data in the modal elements.
JSFiddle