Trying to make a modal window, with an iframe in the middle.
Can not even get ANY browser windows to grey out?
Beau
Registered User
23 posts
Eric Rohloff
Senior Advisor
20,266 posts
Online Now
Hi Beau,
What script are you using? Can you share a link to your page?
What script are you using? Can you share a link to your page?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Beau
Registered User
23 posts
http://beaugroup.com/
Tried to use;
MODAL WINDOW http://malsup.com/jquery/block/#demos
In your web page:
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="http://beaugroup.com/js/jquery.blockUI.js"></script>
<script>
// invoke blockUI as needed -->
$(document).on('click', '#myButton', function() {
$.blockUI();
});
></script>
and others, but nothing happened.
Tried to use;
MODAL WINDOW http://malsup.com/jquery/block/#demos
In your web page:
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include BlockUI -->
<script src="http://beaugroup.com/js/jquery.blockUI.js"></script>
<script>
// invoke blockUI as needed -->
$(document).on('click', '#myButton', function() {
$.blockUI();
});
></script>
and others, but nothing happened.
Eric Rohloff
Senior Advisor
20,266 posts
Online Now
I don't see the script on this page.
http://beaugroup.com/
You also have some stray html tags.
</body>
</html></div>
https://validator.w3.org/nu/?doc=http%3 … oup.com%2F
http://beaugroup.com/
You also have some stray html tags.
</body>
</html></div>
https://validator.w3.org/nu/?doc=http%3 … oup.com%2F
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Beau
Registered User
23 posts
Sorry deleted it.
Anyhow moving on, I would like to make a grey modal with an iframe in the middle, with which I can then iframe various different items in this way.
I would prefer to use html / css for compatibility with mobiles. Using RSD.
Anyhow moving on, I would like to make a grey modal with an iframe in the middle, with which I can then iframe various different items in this way.
I would prefer to use html / css for compatibility with mobiles. Using RSD.
Beau
Registered User
23 posts
Eric used your css popin, for my business card http://beaugroup.com
Beau
Registered User
23 posts
Many thanks
Beau
Beau
Rick Williams
Registered User
190 posts
Online Now
Here is the modal code I used that iI learned from an online web course.
Bootstrap Modals: modals.html
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.box {
border:1px solid grey;
background-color:#d3d3d3;
}
.large {
font-size:3000%;
color:red;
}
#div1 {
background-color:blue;
}
#div2 {
background-color:red;
}
#div3 {
background-color:green;
}
.contentDiv {
height:800px;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#myModal">
Launch demo modal
</button>
!
<!-- Modal -->
<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"><span aria-
hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap Modals: modals.html
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.box {
border:1px solid grey;
background-color:#d3d3d3;
}
.large {
font-size:3000%;
color:red;
}
#div1 {
background-color:blue;
}
#div2 {
background-color:red;
}
#div3 {
background-color:green;
}
.contentDiv {
height:800px;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#myModal">
Launch demo modal
</button>
!
<!-- Modal -->
<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"><span aria-
hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
An expert at using the wrong tool the right way.
Jo Rice
Senior Advisor
10,951 posts
If you're using Bootstrap, they have Modal windows built into their system already for pretty much every version of Bootstrap. I'm doing a website right now will billions of them (ok an exaggeration, but it's about 400 or more of them by the time I get finished hahaha) and the code works pretty slick from the 2.3.2 version, where RLMP is still stuck at and I'm sure the newer versions are even better yet and easier to use.
Bootstrap.com
Bootstrap.com
Beau
Registered User
23 posts
Ric I'm not an expert, do I put all your above code into a file "modals.html"?
And then how do I use it?
And then how do I use it?
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
