I am implementing In-line sharethis buttons in a bootstrap modal.
ShareThis button are working fine on a rendered page.
But, they are not appearing on modal.
When I inspect the modal code or change the height of the inspect window, ShareThis buttons appears on modal.
I think this happening because inspect window changes the layout of the page.
JS link included in header
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#product=custom-share-buttons"></script>
This is the code of modal:
<div class="modal fade" id="inviteFriendsModal" tabindex="-1" role="dialog" aria-labelledby="inviteFriends" style="display: none;">
<div class="modal-dialog " id="primary-header-modal" role="document" style="margin: 8% auto; width: 670px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close alert-close-icon" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Invite Friends, get {{INVITE_EARNED_REWARD}} points</h4>
</div>
<div class="modal-body bg-grayf2f2f2">
<div class="row margin0 text-center">
<img src="{{ asset('images/inviteFriends.png') }}" height="100px" class="margin-bottom20">
<p class="font18">SHARE YOUR CODE</p>
<p><span class="font18 font-wt400" style="color: #1fbad6;">{{Session::get('invitationCode')}}</span></p>
<p class="padd-bottom15">Your friends get {{INVITE_EARNED_REWARD}} points when they join and you get {{INVITE_EARNED_REWARD}} too, after their first interaction.</p>
<div class="text-center">
<div class="sharethis-inline-share-buttons" data-description='{{ $stSummary }}' data-url='{{ $stUrl }}' data-message="{{trans('interviewerMessages.inviteFriendsStSummary')}}" data-short-url="{{ $stUrl }}" data-title="{{ trans('messages.ogTitle') }}"></div>
</div>
</div>
</div>
</div>
</div>
Also, I have created a test url for more clarification:
URL
Please help me on this issue that sharethis buttons should appears on modal on beforehand.
Related
I have content from a loop and I'm displaying title and image in a grid boxes.
In addition, in every box of content I have View more button and when a user clicks on, it shows the full content (title, image, body) in popup.
I have tested with Bootstrap modal and the popup functionality works but when I click the View more from the first box or the second, the popup always shows the content from the first box.
How can I fix this, so when a user clicks on the "View more" from the second box, to show the full content from the second box?
Every content has also ID parameter from the database, for example the first box has ID 1 and the second box has ID 2, so how can I filter that popup by the ID of the content?
Here's my code:
#foreach($drivings as $driving)
<div class="col-sm-3">
<div class="box-inner">
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="title">
{{ $driving->title }}
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
View more
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ $driving->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="modal-body">
{!! $driving->body !!}
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
You are targeting same id in each iteration #exampleModal. So, every button have same target with id #exampleModal.
So the solution is to append it with current driving id.
Assuming that you are using id for toggling modal, You can do something like this in button:
data-target="#exampleModal{{driving->id}}"
And in modal:
id="#exampleModal{{driving->id}}"
It's a pretty common problem when using foreach in blade
The problem is all your modal div have the same id so your code detects only the first one with it. You have to give different id to all your modal div and the button view more.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-{{ $driving->id }}">
View more
</button>
<div class="modal fade" id="exampleModal-{{ $driving->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel-{{ $driving->id }}">{{ $driving->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="modal-body">
{!! $driving->body !!}
</div>
</div>
</div>
enter image description here
this is my laravel blade code, I want to show the popup on the same page, it is showing also. But it is not clickable, and shows fade model can anyone suggest me to do another method, as I have tried other's method also. Thank you in advance.
#foreach($popup as $pop)
<div class="popup col-md-3">
<div class="contain">
<img src="{{ $pop->front_layout }}" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<a class="btn btn-warning" data-toggle="modal" data-target="#myModal">Preview</a>
</div>
</div>
{{--<div class="pops" id="{{ $pop->id }}">
{!! $pop->website !!}
</div>--}}
</div>
<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>
#endforeach
Your modals don't have a unique id.
<a class="btn btn-warning"
href="#loginbutton"
data-toggle="modal"
data-target="#myModal-{{ $pop->id }}">Preview</a>
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog">
As for the visualization problem you've got two possible fixes:
Add a high z-index value to your modal.
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog"
style="z-index: 10000; /* adjust as needed */">
Add enough top margin to your modal to avoid having it overlap with the navbar
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog"
style="margin-top: 20rem /* adjust as needed */;">
Make sure your modal is actually at the end of the page and has no parent elements besides the </body> tag
<body>
....
<div class="modal fade" ...></div>
<script ...>...</script>
<script ...>...</script>
<script ...>...</script>
</body>
try to change modal css "top" value,
Maybe this can help
.modal {
top: 120px;
}
Or change .modal-dialog css
.modal-dialog {
margin: 100px auto; }
I have created a view that shows all images used in Carousel. This is my method in controller
My edit method:
public function edit($id)
{
$carousel = Carousel::find($id)->first();
return view('admin.partials._edit-modal.blade');
}
My route for edit:
Route::get('carousel.edit/{id}',['as' => 'carousel.edit', 'uses' => 'LinkController#edit']);
This is my code to display it in view:
#foreach($carousels as $carousel)
<div class="col-xs-6 col-md-3 grid">
<a href="{{ url($carousel->path) }}" class="thumbnail" data-lity>
<img class="img-responsive" src="{{ $carousel->path }}" alt="">
</a>
</div>
#endforeach
I've set up a button to open a model that shows the selected image and form to edit the image name [ Form not setup yet, shows only image].
My model code:
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="{{ $carousel->path }}" alt="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
There is no error in code but when the edit button is clicked it is always showing the last image of the table. Whether I click edit button of first,second or any image. The model always shows the last image.
When showing the images with a foreach() loop you should include the button to edit that image including the id of the image and pass this id to the modal. Something like this:
<button type="button" class="edit-image" data-toggle="modal" data-target="#myEditImageModal" data_value="{{ $image->id }}"> Edit</button>
Then add a script to pass that specific id when the button is clicked to the modal. You can accomplish this with js:
<script>
// pass image id to modal
$('.edit-image').click(function() {
$("#image_id").val($(this).attr('data_value'));
});
</script>
Finally the modal will receive that id and you can store it in a hidden input field inside your form. Something like this:
<div id="myEditImageModal" tabindex="-1" role="dialog" class="modal fade">
...
<form>
...
<input type="hidden" name="image_id" id="image_id">
...
</form>
...
</div>
Place the modal outside the foreach loop.
I'm currently working on a website with YouTube embedded videos in Bootstrap modal. The problem is that YouTube embed is slowing down the website, because every embed is resulting in like 6 Chrome extension errors. This will result in like 100 errors and the website is going really slow.
Because it looks like every video is getting loaded, because they are in a while loop. Is there any other way to embed it? Without all these errors..
Can I make it better? I don't want all those errors. I tried object, but the videos are loading really slowly.
There is an image of the error.
I'm looping out images and when I click on them, it will embed out youtube videos.
<div class="mosaic-block bar2">
<div class="mosaic-overlay" >
<div class="details">
<center><h4>'.$dos['namn'].'</h4></center><br/>
</div>
</div>
<div class="mosaic-backdrop"><img src="uploads/'.$dos['bild'].'" data-toggle="modal" data-target="#'.$dos['id'].'"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="'.$dos['id'].'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="margin-top: 159px;/* float: left; */width: 800px;float: 0 auto;margin: 0 auto;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<center><font color="grey">'.$dos['uppare'].'</font></center> <div class="content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$dos['youtube'].'" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
I am trying to open bootstrap pop for every row in table .It works if I keep the
onclick event in loop and pop up window in loop for getting different id ie photoModal.But for some reason i have to keep the pop up window out of loop.
<!-- Image toggle box start-->
<div class="bs-example">
<div id="photoModal" class="modal fade">
<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">rudra pop 2 </h4>
</div>
<div class="modal-body"> <img src="<?php echo URL;?>images/decor/Int-Design2.jpg" style="max-width:100%; " /> </div>
</div>
</div>
</div>
</div>
<!-- End Image toggle box start-->
<a href="#" data-toggle="modal" data-target="#photoModal" data-title="Feedback"
style="border:none !important; text-decoration:none !important;">
<div class="tz-image-item">
<img alt="" src="images/decor/Int-Design1.jpg">
</div>
</a>
Use Javascript to open your modal dialog. That should help you.
$(document).ready(function() {
$('tr').on('click', function(ev) {
$('#my-modal').modal('show');
});
});