I am trying to create a html modal window in zk. But the hide functionality hides also the window as shown i the image
Code snippet:
<tabpanel id="borgerdkRequestPanel2">
<div>
<html xmlns="native" xmlns:u="zul"
xmlns:zk="zk">
<a data-target="#myModal1" role="button"
class="btn" data-toggle="modal">
Launch demo modal
</a>
<div id="myModal1" class="modal hide "
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="false">
×
</button>
<h3 id="myModalLabel1">
Modal header
</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn"
data-dismiss="modal" aria-hidden="true">
Close
</button>
<button class="btn btn-primary">
Save changes
</button>
</div>
</div>
</html>
</div>
</tabpanel>
It seems to be some kind of zk problem, as the code runs fine in html. CSS is bootstrap. And ZK framework is 7.0.3.
remove hide class from your modal. If you want some animation add instead fade class to your modal.
The result should be this:
<div id="myModal1" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
Tested on ZK 7.0.4
Related
I want to load one page inside another(I'm working with laravel ). I have a link on the page, when user clicks on a button, a bootstrap popup modal will be shown. So I need to load the whole page (including scripts and styles) in this bootstrap popup modal. The problem is my loaded page in popup, doesn't work correctly.. and I don't know how to load my scripts into my modal.. I have tried with iframes but it doesn't work either with the error 'X-Frame-Options' with 'deny' value..
Can anyone help me to resolve it?
thanks with regards
its a sample of my code:
<a class="btn"
title="View"
data-toggle="modal"
data-target="#cv_view">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
{{-- modal--}}
<div class="modal fade"
id="cv_view"
tabindex="-1"
role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe
:src="cv.viewRoute"
style="zoom:3"
width="100%"
height="250"
frameborder="0">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
A bootstrap modal in one of my sites is working perfect when i view it localy (the PDF is loading fine) but online although the modal is working the PDF is not diplayed.
Any ideas?
Thank you
<button type="button" class="btn btn-lg btn-outline" data-toggle="modal" data-target="#myModal">
<i class="fa fa-download"></i>Launch my CV
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/cv.pdf" data-backdrop="static" data-keyboard="false">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="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">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>
So I have the following html:
<div class="btn-group pull-right">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Export Features <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>CSV
</li>
<li>Excel
</li>
</ul>
</div>
<div class="modal fade" id="myModal" 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">
<h3>Currently downloading: <small>feature-set-II.csv</small></h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
60%
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" disbaled>Begin Download</button>
</div>
</div>
</div>
</div>
And when ever I click on CSV in the button drop down - what happens is it refreshes the page and the modal never opens, I believe its because of the href="#" part, but I am not sure, This shouldn't require any JS at all...
Your example does work correctly. Try it in this Bootply.
The Modal feature from Bootstrap requires the bootstrap.js library or at least the modal.js part of this library. You don't need to write any Javascript but you do need to include the Javascript library.
Your code should works fine:
Bootply Demo
Some things to note:
You need to include jQuery since Bootstrap js require jQuery to works.
You need to include Bootstrap CSS and JS files.
Include Bootstrap JS after you've included jQuery properly.
Your call to the modal should match IDs. Use something like this:
<a data-toggle="modal" href="#myModal">CSV</a>
Your first div for you modal should be something like this
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
That should fix it
Dont know whats really happening, but i just implement modal (without the js call) and it opens automatically on page load.
I have two on the same page, does anybody knows why this is happening and how to make them to open only on the link?
thanks in advance
Title
<div id="save-list" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p><h4>sample text</h4></p>
<div class="row-fluid">
<div class="span12"><input name="" type="text"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">No</button>
<button class="btn btn-confirm">Yes</button>
</div>
</div>
And this one
Popup de transición entre tabs
<div id="save-add-guest" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p><h4>Would you like to add these <br>contacts to the guest list?</h4></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">No, Thanks</button>
<button class="btn btn-confirm">Yes Please!</button>
</div>
</div>