JavaScript

#myImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
 }

#myImg:hover {opacity: 0.7;}


 .modal {
 display: none;
 position: fixed;
 z-index: 1;
 padding-top: 100px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.9);
 }


 .modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 }

#caption {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #ccc;
 padding: 10px 0;
 height: 150px;
 }


.modal-content, #caption {
 -webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6s;
 animation-name: zoom;
 animation-duration: 0.6s;
 }

@-webkit-keyframes zoom {
 from {-webkit-transform:scale(0)}
 to {-webkit-transform:scale(1)}
 }

@keyframes zoom {
 from {transform:scale(0)}
 to {transform:scale(1)}
 }


 .close {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
 }

.close:hover,
 .close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
 }


 <a href="https://www.codeproject.com/Members/media">@media</a> only screen and (max-width: 700px){
 .modal-content {
 width: 100%;
 }
 }
 .nvgt{
 position:absolute;
 top: 120px;
 height: 50px;
 width: 30px;
 opacity: 0.6;
 }
 .nvgt:hover{
 opacity: 0.9;
 }
 #prev{
 background: #000 url('./image/prev.png') no-repeat center;
 left: 0px;
 }
 ul {
 list-style-type: none;

}
 ul li {
 display: inline-block;
 background:white;
 margin-bottom:10px;
 } 
 .change_btn {
 text-align:center;
 font-size:30px;
 float:left;
 }




<pre>

  

 

 

 Blog 

 

thepast 

  
.

 ASP.NET	
Home


Get Started


Learn


Hosting


Downloads


Community


Forums


Help

.
Home/ASP.NET Forums/General ASP.NET/jQuery for the ASP.NET Developer/modal popup window with datalist 


modal popup window with datalistRSS 


4 replies Subscribe via Email 

Last post 1 hour, 15 minutes ago by thepast
.
‹ Previous Thread|Next Thread ›



Print
Share	


Shortcuts

Active Threads


Unanswered Threads


Unresolved Threads


My Threads


Forum Subscriptions


Support Options


Advanced Search

 Reply|
Edit|
Favorites|
Alert Moderators
.

thepastthepast 
None


0 Points

8 Posts

 
modal popup window with datalist

10 hours, 6 minutes ago|LINK|85.194.71.226


I am using datalist to retrieve images from database  and everything is working perfectly 

I want when I click on image  modal popup show image with next and previous buttons  show next images which in page    if in page  5 images  show 5       if in page 20 images   popup show 20



please help me   I am stuck in that.



my data list is

<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
 <itemtemplate>
 
 <table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2"> 
 
 </th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td>  <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />
 </td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
 <asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr>   </tbody></table>
 
 <selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">





 



.
 Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.

thepastthepast 
None


0 Points

8 Posts

 
Re: modal popup window with datalist

9 hours, 52 minutes ago|LINK|85.194.71.226


Please Help   I am waiting for this issue  



Thanks in advance
.
 Reply|
Mark As Answer|
Edit|
Favorites|
Alert Moderators
.

thepastthepast 
None


0 Points

8 Posts

 
Re: modal popup window with datalist

8 hours, 10 minutes ago|LINK|85.194.71.226


I found  some code   work  with popup modal    but  moving between images not working    ( next and precious)   not working

 can any one modify it  please




#myImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
 }

#myImg:hover {opacity: 0.7;}


 .modal {
 display: none;
 position: fixed;
 z-index: 1;
 padding-top: 100px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.9);
 }


 .modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 }

#caption {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #ccc;
 padding: 10px 0;
 height: 150px;
 }


.modal-content, #caption {
 -webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6s;
 animation-name: zoom;
 animation-duration: 0.6s;
 }

@-webkit-keyframes zoom {
 from {-webkit-transform:scale(0)}
 to {-webkit-transform:scale(1)}
 }

@keyframes zoom {
 from {transform:scale(0)}
 to {transform:scale(1)}
 }


 .close {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
 }

.close:hover,
 .close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
 }


 <a href="https://www.codeproject.com/Members/media">@media</a> only screen and (max-width: 700px){
 .modal-content {
 width: 100%;
 }
 }
 .nvgt{
 position:absolute;
 top: 120px;
 height: 50px;
 width: 30px;
 opacity: 0.6;
 }
 .nvgt:hover{
 opacity: 0.9;
 }
 #prev{
 background: #000 url('./image/prev.png') no-repeat center;
 left: 0px;
 }
 ul {
 list-style-type: none;

}
 ul li {
 display: inline-block;
 background:white;
 margin-bottom:10px;
 } 
 .change_btn {
 text-align:center;
 font-size:30px;
 float:left;
 }




<asp:datalist id="DataList1" runat="server" footerstyle-height="20px" height="375px" repeatcolumns="5" repeatlayout="Table" width="975px" cellpadding="0" cellspacing="0">
 <itemtemplate>
 
 <table class="table" style="margin-right: 10px"><tbody><tr> <th colspan="2"> 
 
 </th></tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td>  <br> Year: <%# Eval("Year")%> <br> Year: <%# Eval("month")%>" />

</td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Name:</span> <span style="font-size: 12px"><%# Eval("imagename")%></span></td> </tr> <tr> <td colspan="2"><span style="font-size: 12px">Date:</span> <span style="font-size: 12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td> </tr><tr> <td colspan="2"> <span style="font-size: 12px; margin-bottom: 30px">
 <asp:linkbutton id="LinkButton1" runat="server">Dawnload</span></td></tr>   </tbody></table>
 
 <selecteditemstyle backcolor="#E2DED6" font-bold="True" forecolor="#333333">





 



<div id="myModal" class="modal">
 ×
 <a href="#">prev</a>
 <div style="width: 70%; float: left">
 
 </div>
 <a href="#">Next</a>
 <div id="caption"></div>
 </div>
 


















var modal = document.getElementById('myModal');


 var img = $('#myImg');
 var modalImg = $("#img01");
 var captionText = document.getElementById("caption");
 $('.myImg').click(function () {

 modal.style.display = "block";
 var newSrc = this.src;
 modalImg.attr('src', newSrc);
 //captionText.innerHTML = this.alt;
 });

$('.change_btn').click(function () {
 var btn_click = $(this).find('a').html();
 var current_src = $('#img01').attr('src');
 $('.myImg').each(function () {
 if ($(this).attr('src') == current_src) {
 current_index = $(this).parent().index();
 if (btn_click == 'prev') {
 var new_index = current_index - 1;
 $('#img01').attr('src', $('attach:eq(' + new_index + ')').find('img').attr('src'));
 }
 else if (btn_click == 'Next') {
 var new_index = current_index + 1;
 $('#img01').attr('src', $('datalist1:eq(' + new_index + ')').find('img').attr('src'));
 }

}
 });
 });

var span = document.getElementsByClassName("close")[0];
 span.onclick = function () {
 modal.style.display = "none";
 }






please any one can modify it       I am stuck  about  4 days  couldn't  solve it 

please

function startGame(){
    gamearea.start();
  }
  function movePlayer(event){
    if(!player.moving){
      moveInterval = setInterval(function(){player.move(event);}, 50);
      player.moving = true;
    }
  }
  function stopPlayer(event){
    clearInterval(moveInterval);
    player.moving = false;
  }
  var gamearea = {
    canvas: document.createElement("canvas"),
    start: function(){
      this.canvas.width = 1100;
      this.canvas.height = 600;
      this.canvas.style.border = "3px solid gray";
      this.canvas.style.display = "block";
      this.canvas.style.margin = "auto";
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
      this.context=this.canvas.getContext("2d");
      player.draw();
      window.addEventListener("keydown", movePlayer, event);
      window.addEventListener("keydown", stopPlayer, event);
    }
  }
  var player={
    x:40, y:580, moving:false,
    draw:function(){
      gamearea.context.fillStyle="ivory";
      gamearea.context.fillRect(this.x+60, this.y, 80, 20);
      gamearea.context.fillRect(this.x+95, this.y-20, 10, 20);
    },
    update: function(d){
      this.x+=d;
    },
    move: function(ev){
      gamearea.context.clearRect(this.x, this.y, 80, 20);
      gamearea.context.clearRect(this.x+35, this.y-20, 10, 20);
      if(ev.keycode== 37 && this.x>0) this.update(-15);
      else if(ev.keycode == 39 && this+80<1100) this.update(15);
      this.draw();
    }
  }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CoreModule } from '../core/core.module';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AppComponent } from './app.component';
import { AdminSharedModule } from '../admin/shared/adminShared.module';
import { HomeSharedModule } from '../home/shared/homeShared.module';
import { PortfoliosSharedModule } from '../portfolios/shared/portfoliosShared.module';

export const AppRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', loadChildren: '../home/home.module#HomeModule' },
    { path: 'reviews', loadChildren: '../reviews/reviews.module#ReviewsModule' },
    { path: 'portfolios', loadChildren: '../portfolios/portfolios.module#PortfoliosModule' },
    { path: 'admin', loadChildren: '../admin/admin.module#AdminModule' }
];

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        CoreModule.forRoot(),
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
        ReactiveFormsModule,
        MDBBootstrapModule.forRoot(),
        AdminSharedModule,
        HomeSharedModule,
        PortfoliosSharedModule,
        RouterModule.forRoot(AppRoutes)
    ],
    exports: [
        RouterModule
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { RouterModule, Routes } from '@angular/router';
import { ReviewsComponent } from './components/reviews.component';

const reviewsRoutes: Routes = [
    { path: '', component: ReviewsComponent }
];

@NgModule({<br />
    exports: [
        RouterModule
    ],
    imports: [
        CommonModule,
        FormsModule,
        HttpClientModule,
        MDBBootstrapModule.forRoot(),
        RouterModule.forChild(reviewsRoutes)<br />
    ],<br />
    declarations: [
        ReviewsComponent
    ]
})

export class ReviewsModule { }

I'm testing in Chrome, Edge, FF, IE, and O.

The case is that a page has up to 5 iframes that show on a single page. A page is executed in each iframe. These pages have links to other pages that have links. A browser refresh returns the screen to the initial page state in all 5 browsers. But in Chrome and O, the history of the iframes of the set are not deleted. The browser back button or a JavaScript history(-1) button work as originally intended in FF, IE, and Edge. But in Chrome and O, these back buttons start to step back through the sequential history of all iframes.   And the same thing happens with a single frame.

I do a querySelectorAll('iframe') on exit and refresh/load and no iframes are indicated. Yet, in Chrome and Opera, when the page refreshes and the iframes are created again, they remember the history of the same named iframes that were there before the refresh.

I refresh in 3 different ways in this application including the browser refresh button, parent,location,reload(parent.location.href), and parent,location,reload with a particular function. These all work in Edge, FF, and IE. I refresh and can back out of the page to the calling page. In chrome and Opera, even though the iframes have been removed, the new iframes retain the history of the previous iframes. 

I have tried about half dozen approaches in JavaScript to insuring the iframes have been removed. My latest attempt follows. I'm not sure if I'm executing right, but the length is always 0.

var iframesx = document.querySelectorAll('iframe');
for (var i = 0; i < iframesx.length; i++) {
 iframesx.parentNode.removeChild(iframesx);
}

This is a real navigation problem for this application in Chrome and Opera, and I would think for any application in a similar situation. The browser Back button and JavaScript History() methods are fundamental page navigation tools.  Below is a link that demonstrates the problem. The page shows up to the 5 most recent years of a color map. All data is only for testing and some of the data was doubled up for testing.   I believe this is a Chrome and Opera error.   I've tried to find a way to clean up iframe history thouroghly, but with no success.

http://steepusa.no-ip.info/scx/gencm.cgi?str=0b%7ESKY%7EC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2F%7EC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2Fchildren2%2Eview

Bring the page up in Chrome or Opera. Take some links in a couple of iframes. Refresh and hit the browser Back button as if you are backing out of the page. In Edge, FF, and IE, instead of going through the history of the iframes before the refresh, the back out works.  

My platform is Windows 10 running Apache/2.0.64 (Win32), mod_perl/2.0.3, and Perl/v5.8.3. I am running the latest versions of all browsers being used in testing.   However, I think this problem exists independent of platform.

Any help will be appreciated. Thanks.