Adres balk popup scherm
Nu is dat scherm de adres balk te zien.
Nu is mijn vraag kan ik
a> die balk onzichtbaar maken, methode maakt niet veel uit
b > of kan ik in die balk een naam laten komen ipv van het adres?
Ik kom op google in ieder geval niets tegen dat werkt.
https://www.sitepoint.com/community/t/new-window-without-address-bar/60696
Ook kan je niet zomaar zelf een eigen URL verzinnen, natuurlijk wel een eigen title.
Maar waarom zou je een pop-up willen tonen? Is dat niet een beetje oud? Een mooie 'lightbox' is veel moderner.
Gewijzigd op 18/10/2018 09:25:46 door - Ariën -
Ja tis idd oud , maar wil hier alleen ter info zodat ze dan iets kunnen opzoeken en dan weer sluiten.
Ikzelf gebruik de FancyBox
Gewijzigd op 18/10/2018 12:32:00 door - Ariën -
Als dit uit oogpunt van veiligheid nodig is, dan is er iets mis met de veiligheid van jouw applicatie. Security through obscurity is zelden tot nooit de oplossing.
Het zou geen probleem moeten zijn dat er een adresbalk in een popup zit (en zoals hierboven aangehaald zijn hier redenen voor), behalve misschien wanneer dit een esthetische aangelegenheid is, in welk geval je gewoon pech hebt.
- Ariën - op 18/10/2018 15:39:38:
Een tabel in de lightbox? Geen enkel probleem.
Thx voor je kort en duidelijk antwoord @Ariën.
Ik vind jullie hulp super , maar soms mag er ook gewoon een duidelijk en kort antwoord gegeven worden zoals ik als eerste vraag, vrij makkelijk te beantwoorden met ja of nee of met een eventuele andere oplossing zoals @Ariën netjes deed.
De waarom vraag, lijkt mij voor de vraag steller reeds zelf al bekend anders word uiteraard de vraag niet gesteld.
Dat, en de houding van de vragensteller die vaak nogal star is, met de houding "dit is de oplossing, iets anders is ondenkbaar". Zolang er geen oplossing is moet je je misschien wat opener stellen voor alternatieven, ook al is dat niet direct wat je voor ogen had...
Als je graag ja/nee antwoorden wilt en geen zin hebt in wedervragen die de zinnigheid van je aanpak aankaarten dan is Google die kant op --->.
En ook dan zul je er vrij snel achter komen dat een antwoord nooit zo zwartwit is als jij nu voordoet.
- Ariën - op 18/10/2018 15:39:38:
Een tabel in de lightbox? Geen enkel probleem.
Op een of andere manier kom ik niet weg met dat.
Ik heb het gedownload en probeer het werkend in een pagina te krijgen maar zie niks.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<a href="#divForm" id="btnForm">Load Form</a>
<div id="divForm" style="display:none">
<form action="tbd">
File: <input type="file" /><br /><br />
<input type="submit" />
</form>
</div>
<script type="text/javascript">
$(function(){
$("#btnForm").fancybox();
});
</script>
</body>
</html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<a href="#divForm" id="btnForm">Load Form</a>
<div id="divForm" style="display:none">
<form action="tbd">
File: <input type="file" /><br /><br />
<input type="submit" />
</form>
</div>
<script type="text/javascript">
$(function(){
$("#btnForm").fancybox();
});
</script>
</body>
</html>
Wilde iets zoeken via google om een table te zien in fancybox wat jij aangaf maar daar vind ik helaas geen voorbeelden van.
Kijk anders eens naar de demo op die site.
Hoe krijg ik dat opgelost? Moet wel even erbij zeggen dat het in een form zit, weet niet of dat er iets toe doet.
Hier is mijn code wat ik als test ben aan het doen, dus het verdiend echt geen schoonheids prijs, wil alleen kijken hoe ik die table werkend krijg in fancybox.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<title>fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Add fancybox3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<style>
body{width:1100px;font-family:arial;letter-spacing:1px;line-height:10px;}
.tbl-qa{width: 100%;font-size:0.9em;background-color: #f5f5f5;}
.tbl-qa th.table-header {padding: 2px;text-align: left;padding:5px;}
.tbl-qa .table-row td {padding:10px;background-color: #FDFDFD;vertical-align:top;}
.button_link {color:#FFF;text-decoration:none; background-color:#428a8e;padding:10px;}
#keyword{border: #CCC 1px solid; border-radius: 4px; padding: 7px;background:url("demo-search-icon.png") no-repeat center right 7px;}
.btn-page{margin-right:10px;padding:5px 10px; border: #CCC 1px solid; background:#FFF; border-radius:4px;cursor:pointer;}
.btn-page:hover{background:#F0F0F0;}
.btn-page.current{background:#F0F0F0;}
</style>
</head>
<body>
<?php
$search_keyword = '';
if(!empty($_POST['search']['keyword'])) {
$search_keyword = $_POST['search']['keyword'];
}
$sql = 'SELECT * FROM PrepInstelWaarden WHERE Tag LIKE :keyword OR Onderdeel LIKE :keyword ORDER BY id ASC';
/* Pagination Code starts */
$per_page_html = '';
$page = 1;
$start=0;
if(!empty($_POST["page"])) {
$page = $_POST["page"];
$start=($page-1) * ROW_PER_PAGE;
}
$limit=" limit " . $start . "," . ROW_PER_PAGE;
$pagination_statement = $pdo_conn->prepare($sql);
$pagination_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pagination_statement->execute();
$row_count = $pagination_statement->rowCount();
if(!empty($row_count)){
$per_page_html .= "<div style='text-align:center;margin:20px 0px;'>";
$page_count=ceil($row_count/ROW_PER_PAGE);
if($page_count>1) {
for($i=1;$i<=$page_count;$i++){
if($i==$page){
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page current" />';
} else {
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page" />';
}
}
}
$per_page_html .= "</div>";
}
$query = $sql.$limit;
$pdo_statement = $pdo_conn->prepare($query);
$pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pdo_statement->execute();
$result = $pdo_statement->fetchAll();
?>
<div style="display: none;" id="hidden-content">
<form name='frmSearch' action='' method='post'>
<h3>Instel waarde Preparation</h3>
<div style='text-align:right;margin:20px 0px;'><input type='text' name='search[keyword]' value="<?php echo $search_keyword; ?>" id='keyword' maxlength='25'></div>
<table class='tbl-qa'>
<thead>
<tr>
<th class='table-header' width='15%'>Tag</th>
<th class='table-header' width='30%'>Onderdeel</th>
<th class='table-header' width='15%'>Min. Waarden</th>
<th class='table-header' width='15%'>Max. Waarden</th>
<th class='table-header' width='15%'>Richt Waarden</th>
</tr>
</thead>
<tbody id='table-body'>
<?php
if(!empty($result)) {
foreach($result as $row) {
?>
<tr class='table-row'>
<td><?php echo $row['Tag']; ?></td>
<td><?php echo $row['Onderdeel']; ?></td>
<td><?php echo $row['Min_waarde']; ?></td>
<td><?php echo $row['Max_waarde']; ?></td>
<td><?php echo $row['Grens_waarde']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<?php echo $per_page_html; ?>
</form>
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancybox
</a>
</body>
</html>
<html lang="en">
<head>
<title>fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Add fancybox3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<style>
body{width:1100px;font-family:arial;letter-spacing:1px;line-height:10px;}
.tbl-qa{width: 100%;font-size:0.9em;background-color: #f5f5f5;}
.tbl-qa th.table-header {padding: 2px;text-align: left;padding:5px;}
.tbl-qa .table-row td {padding:10px;background-color: #FDFDFD;vertical-align:top;}
.button_link {color:#FFF;text-decoration:none; background-color:#428a8e;padding:10px;}
#keyword{border: #CCC 1px solid; border-radius: 4px; padding: 7px;background:url("demo-search-icon.png") no-repeat center right 7px;}
.btn-page{margin-right:10px;padding:5px 10px; border: #CCC 1px solid; background:#FFF; border-radius:4px;cursor:pointer;}
.btn-page:hover{background:#F0F0F0;}
.btn-page.current{background:#F0F0F0;}
</style>
</head>
<body>
<?php
$search_keyword = '';
if(!empty($_POST['search']['keyword'])) {
$search_keyword = $_POST['search']['keyword'];
}
$sql = 'SELECT * FROM PrepInstelWaarden WHERE Tag LIKE :keyword OR Onderdeel LIKE :keyword ORDER BY id ASC';
/* Pagination Code starts */
$per_page_html = '';
$page = 1;
$start=0;
if(!empty($_POST["page"])) {
$page = $_POST["page"];
$start=($page-1) * ROW_PER_PAGE;
}
$limit=" limit " . $start . "," . ROW_PER_PAGE;
$pagination_statement = $pdo_conn->prepare($sql);
$pagination_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pagination_statement->execute();
$row_count = $pagination_statement->rowCount();
if(!empty($row_count)){
$per_page_html .= "<div style='text-align:center;margin:20px 0px;'>";
$page_count=ceil($row_count/ROW_PER_PAGE);
if($page_count>1) {
for($i=1;$i<=$page_count;$i++){
if($i==$page){
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page current" />';
} else {
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page" />';
}
}
}
$per_page_html .= "</div>";
}
$query = $sql.$limit;
$pdo_statement = $pdo_conn->prepare($query);
$pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pdo_statement->execute();
$result = $pdo_statement->fetchAll();
?>
<div style="display: none;" id="hidden-content">
<form name='frmSearch' action='' method='post'>
<h3>Instel waarde Preparation</h3>
<div style='text-align:right;margin:20px 0px;'><input type='text' name='search[keyword]' value="<?php echo $search_keyword; ?>" id='keyword' maxlength='25'></div>
<table class='tbl-qa'>
<thead>
<tr>
<th class='table-header' width='15%'>Tag</th>
<th class='table-header' width='30%'>Onderdeel</th>
<th class='table-header' width='15%'>Min. Waarden</th>
<th class='table-header' width='15%'>Max. Waarden</th>
<th class='table-header' width='15%'>Richt Waarden</th>
</tr>
</thead>
<tbody id='table-body'>
<?php
if(!empty($result)) {
foreach($result as $row) {
?>
<tr class='table-row'>
<td><?php echo $row['Tag']; ?></td>
<td><?php echo $row['Onderdeel']; ?></td>
<td><?php echo $row['Min_waarde']; ?></td>
<td><?php echo $row['Max_waarde']; ?></td>
<td><?php echo $row['Grens_waarde']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<?php echo $per_page_html; ?>
</form>
</div>
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Trigger the fancybox
</a>
</body>
</html>
Gewijzigd op 20/10/2018 08:19:16 door Pascal Schuffelers
iframe?
dat werkt wel zie ik.
Gewijzigd op 20/10/2018 08:55:32 door Pascal Schuffelers
Thx!
Ik heb nu dus zo als ik op een knop druk dat die Fancybox naar voren komt die mij iets laat zien.
Kan ik een variabele meesturen als ik op die knop druk en deze tonen in die Fancybox zonder dat het bij die knop in een form staat?