I want to show texts in web-page using loop with html Modal Box.texts saved in database.I am using laravel framework.only show modal box for first item, maybe it can be JavaScript not loading problem.
I used https://www.w3schools.com/howto/howto_css_modals.asp Modal box tutorials.used that css and javascript code.
just used w3schools code.
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6">
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button id="myBtn">Details</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>
#endforeach
no errors showing but not working modal box for all sets, only showing first item in loop
Set Id for each modal and open them using the button on click
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6" {{ $makeId = 1 }}>
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button class="myBtn" modal-id="modal-{{ $ad->id }}">Details</button>
<!-- The Modal -->
<div class="modal" id="modal-{{ $ad->id }}">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>#endforeach
<script>
$('.myBtn').click(function(){
var GetModalId = $(this).attr('modal-id');
$("#"+GetModalId).css('display', 'block');
});
$('.close').click(function(){
$('.modal').css('display', 'none');
});
</script>
Remember you need to attach jquery to your page to this codes work
you can use this code to attach jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Related
I have to setup a Novel setup means I have to show episodes of every related novel on its click.
public function Novels()
{
$Novels = Novel::latest()->get();
foreach($Novels as $novel)
$novel->episodes = NovelEpisode::where('novel_id', $novel->id)->get();
return view('novels.Novels',compact('Novels'));
}
Here's my laravel controller blade code .
and
Here's my blade code with a modal inside.
<div class="row mx-0 top-75">
#foreach ($Novels as $novel)
<div class="col-lg-4 col-md-4 text-end">
<div class="card">
<div class="card-body top-65">
<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid" alt="img" id="myImg" >
<h5 class="card-title mbot-20 ptop-50">{{ $novel->name }}</h5>
<p class="card-text">{{ $novel->description }}</p>
<p class="price-text mb-5">قیمت۱۸۰۰روپے</p>
<div class="modal fade" id="myModal" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body" id="modaldata">
#foreach ($novel->episodes as $episode)
<div class="container">
<div class="row">
<div class="col-12">
<div class="main mt-2">
<div class="d-flex justify-content-center">
<a href="{{route('episode',['id'=>$episode->id])}}" class="text-decoration-none">
<div class="modal-cont">
<p class="mod-text">{{$episode->episode}}<span class=""><i class="fa-solid fa-angle-right next-icn"></i></span></p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
Here's my jquery code which i'm using to popup modal.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myImg').click(function(){
$('#myModal').modal('show')
});
});
</script>
When you want to put an event listener on multiple doms, you need to use a class and not an id since ids attribute can target only one dom.
$('.myImg').click(function(){
Next to target the right modal for each image, you need to have a way to differentiate between them. (also give each modal a unique id)
<div class="modal fade" id="myModal-{{$novel->id}}" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
Now you only need a way to get the correct modal id to show it. one easy solution is to use data-x attributes
<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" data-id="{{$novel->id}" >
And that's it.
$('.myImg').click(function(){
let id = $(this).data('id');
$('#myModal-'+id).modal('show')
});
Another Solution without using data-x attribute
use classes and target the modal with find() or siblings()
<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" >
//...used class
<div class="modal fade" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
//... removed the id (not unique)
And the JS
$('.myImg').click(function(){
let modal = $(this).parent().find('.modal')[0];
$(modal).modal('show')
});
//or
$('.myImg').click(function(){
let modal = $(this).siblings('.modal')[0];
$(modal).modal('show')
});
This is possible since both the img and the modal are on the same level.
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
I have a 2 popup on myscreen which is linking one to another. when i click the 2nd popup it appears and when i close the pop up, the popup content goes off, but the backdrop still remains and disables the whole page.
html:
<div id="license-temp" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="get-license-popup">
<div class="license-heading">Get License</div>
<br>
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-8">
<div class="license-description reg">What is the duration of the usage?</div>
<div class="duration">
<select id="usage-time">
<option>1 Week - $0.9</option>
<option>1 Weeks - $2.0</option>
<option>1 Month - $5.0</option>
<option>2 Months - $10.0</option>
</select>
</div>
</div>
<div class="col-md-5 col-sm-4 col-xs-8"><div class="license-description reg">What is the preferred return method?</div>
<div class="return-method">
<div><input type="radio" value="auto"> Automatic Return</div>
<div><input type="radio" value="manual"> Manual Return</div>
</div>
</div>
</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
GET LICENSE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!--<img class="modal-cont" src="images/license-popup.png">-->
<div class="purchase-license">
<div class="license-heading">Get License</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
GET LICENSE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="confirm-license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="purchase-license">
<div class="license-heading">Confirm</div>
<table class="get-license-confirm">
<tr>
<td>Confirm</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
code:
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide')
});
After closing all popups it looks like below image...the backdrop still remains.
When you open modal then there is some style add in body and append div to body so you need to remove that style and that div.
Hi have solution for that.
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
Use This Code
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove();
How can i hide a image slider using javascript? i want show this banner in first loading and want to hide this banner with a button or "a" tag. if a visitor dont want to see the banner again they can hide the banner.
here my code
<div class="bootslider" id="bootslider">
<!-- Bootslider Loader -->
<div class="bs-loader">
<img src="img/loader.gif" width="31" height="31" alt="Loading.." id="loader" />
</div>
<div class="bs-container">
<!-- Bootslider Slide -->
<div class="bs-slide active" data-animate-in="swing" data-animate-out="magic">
<div class="bs-foreground">
<div class="text-center text-white" data-x="420" data-y="144" data-speed="400" data-animate-in="fadeInDown" data-delay="400">
<h1 class="banner_text1">TEXT<br>
MINING <br>
ENGINE</h1>
<p class="hidden-xs banner_text2">
TEXT SENTIMENTAL ANALYSIS
</p>
</div>
<div class="text-center">
<div class="text-center" style="position:absolute; width:43.75%; margin-left:28.125%;">
<img class="banner_img_imac" style="z-index:0" data-animate-in="fadeInDown" data-delay="800" src="img/template-product-1-imac.png" alt="iMac" class="image-layer" />
</div>
</div>
</div>
<div class="bs-background">
<img src="img/template-product-1.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
</div>
<!-- Bootslider Progress -->
<div class="bs-progress progress">
<div class="progress-bar wet-ashpalt"></div>
</div>
<!-- /Bootslider Progress -->
<!-- Bootslider Thumbnails -->
<div class="bs-thumbnails text-center text-wet-ashpalt">
<ul class=""></ul>
</div>
<!-- /Bootslider Thumbnails -->
<!-- Bootslider Pagination -->
<div class="bs-pagination text-center text-wet-ashpalt">
<ul class="list-inline"></ul>
</div>
<!-- /Bootslider Pagination -->
<!-- Bootslider Controls -->
<div class="text-center">
<div class="bs-controls">
<img src="images/arrow_left.png">
<img src="images/arrow_rit.png">
</div>
</div>
<!-- /Bootslider Controls -->
</div>
please search stackoverflow before
guess you were looking for THIS
of course if you want to hide it permenetly you have to add some to a DB
otherwise it will appear everytime as long the session is refreshed :)
I have a little problem here. my tag became <br> instead when I tried to set the text of label from mongodb.
//my meteor methods
Meteor.methods({
addEventDetails : function(title, details) {
details=details.replace('\n', "<br>");
eventDetails.insert({'title': title, 'details': details});
}
});
//my template function
Template.detailsboard.evt = function(){
return eventDetails.findOne({});
}
//my template
<template name="detailsboard">
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="pull-left"><i class="icon-bookmark"></i><span class="block-header-title">Event Details</span></div>
<div class="pull-right searchbar"></div>
<!-- <div class="pull-right"><span class="badge badge-warning">View More</span></div> -->
</div>
<!-- /block header-->
<!-- block content -->
<div class="block-content-details collapse in">
<ol class="stream-items" id="stream-items-id">
<a class="logo-details" href="/"></a>
<div class="row-fluid" style="padding:10%">
<div class="span12">
<label class="text-inverse details-title">{{evt.title}}</label>
**//problem here**
<p class="text-inverse details-content">this.html({{evt.details}})</p>
</div>
</div>
</ol>
</div>
<!-- /block content -->
</div>
<!-- block header -->
</template>
Use a triple mustache {{{evt.details}}}, because by default Handlebars (or originally Mustache) escapes HTML.