I am quite new to the web app development. I have a web-map application based on OpenLayers 6.5. I want to add Bootstrap Modal that will be auto displayed whenever the web map is loaded. I tried to follow Bootstrap documentation but my Modal is not showing. I use Bootstrap v.3.4. Here is the snippet of my code:
<!doctype html>
<meta charset="utf-8"/>
<html lang="en">
<head>
<!-- Ol CSS -->
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-layerswitcher-master/dist/ol-layerswitcher.css" />
<!-- Ol JS -->
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
<script src="libs/jquery.min.js"></script>
<!-- Ol-ext extension -->
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
<!-- J-Query -->
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<script src="libs/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="http://158.194.94.29:8081/webgis/libs/jquery-ui-1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script type="text/javascript" src="libs/bootstrap.min.js"></script>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
etc.
Any idea why the modal is not showing?
here is the code. Run Snippet. The modal popup is opening on load.
$(window).on('load', function() {
$('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
</body>
</html>
Do you want the modal to be shown on page load?
In the above case, you haven't called the modal yet and thus it is hidden. A modal by itself will remain hidden until or unless it is called using an event. If you want the modal to be shown on page load, use the below code.
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
Your head tag is not closed.
I tried with external css and js files. It is working....
JSFIDDLE
<head>
</head> // This is closing tag
If you want to open modal on page load....
$(window).on('load', function() {
$('#myModal').modal('show');
});
Related
I am trying to get a Modal to appear on my website using Bootstrap 4. Somehow it's not appearing no matter what I try.
Below is the HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<!--Custom CSS-->
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
<p>Text in Modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The Navbar works just fine. Maybe there is a doc missing from Bootstrap? Thanks for your input.
Any suggestions to fix this content shake? If I delete title="1" from a element shake will disappear.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div class="container">
<div class="list-group">
<a data-toggle="tooltip" href="TEST.ASP" class="list-group-item" title="1">First item</a>
</div>
</div>
<div class="container">
TEST
</div>
</body>
</html>
add margin bottom 0 to the first child of the list, check the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<style>
.list-group-item:first-child {
margin-bottom:0;
}
</style>
<div class="container">
<div class="list-group">
<a data-toggle="tooltip" href="TEST.ASP" data-toggle="tooltip" data-placement="bottom" class="list-group-item" title="1">First item</a>
</div>
</div>
<div class="container">
TEST
</div>
</body>
</html>
I am using the following code and it shrinks each line and also the overall UI is lost for some reason. HOw can I fix it?
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12">
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12">
<input id="text" placeholder="text" type="text" class="form-control"
required="true">
</div>
</div>
</div>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'pt-BR'
});
</script>
</body>
<html>
A lot of problems here, my friend:
Loading multiple versions of Bootstrap
Loading jQuery after at least one bootstrap js file
At least in the fiddle, loading over http as opposed to https
The datetimepicker you're trying to use is not compatible with bootstrap 3 and is no longer maintained.
Your html contained classes from both, old and new versions of bootstrap.
Here's a somewhat fixed version of your fiddle, but don't expect it to actually work as you wanted it to.
When I put my textarea which I want to be the wysihtml5-editor i get the following error message:
Uncaught TypeError: Cannot read property 'document' of null at wysihtml5-0.3.0.js:5460
Here's the html-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<title>TTZ - Fragebogen erstellen</title>
<!--Core CSS -->
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery.steps.css?1">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- Html5 Editor -->
<link href="js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="css/questionForm.css" rel="stylesheet">
</head>
<body>
<section class="panel">
<header class="panel-heading">
Fragebogen Erstellen
</header>
<div class="panel-body">
<div id="wizard">
<!-- Step 1 start -->
<h2>Eigentschaften</h2>
<section>
<form class="form-horizontal" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="col-lg-2 control-label">Titel</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Beschreibung</label>
<div class="col-lg-10">
<textarea class="htmlEdit form-control" cols="60" rows="8"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Bild zum Fragebogen:</label>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" />
</span>
<i class="fa fa-trash"></i> Remove
</div>
</div>
</div>
</div>
</form>
</section>
<!-- Step 1 end -->
<!-- Step 2 start -->
<h2>Fragen hinzufügen</h2>
<section>
Some content here
</section>
<!-- Step 2 end -->
<!-- Step 3 start -->
<h2>Abschlusstext konfigurieren</h2>
<section>
Some content here
</section>
<!-- Step 3 endt -->
<h2>Abschluss</h2>
<section>
Some content here
</section>
</div>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
</section>
<!--Core js-->
<script src="js/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"> </script>
<script src="js/jquery.scrollTo.min.js"></script>>
<script src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery-steps/jquery.steps.js"></script>
<!-- HTML5 Editor -->
<script src="js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script src="js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<!-- Our main JS file -->
<script src="js/mini-upload-form/assets/js/script.js"></script>
<script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js"> </script>
<script type="text/javascript" src="js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<script type="text/javascript">
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "fade"
});
$('.htmlEdit').wysihtml5();
});
</script>
</body>
</html>
When i move my textarea out of my jquery steps div it works perfectly fine... But I need to have a wysihtml5 inside of my steps. Any ideas?
Edit: Here's the code which seems to have a problem:
// Create the basic dom tree including proper DOCTYPE and charset
iframeDocument.open("text/html", "replace");
iframeDocument.write(sandboxHtml);
iframeDocument.close();
this.getWindow = function() { return iframe.contentWindow; };
this.getDocument = function() { console.log(iframe); return iframe.contentWindow.document; };
I already watched at the iframe at that point and it's null. I just don't know why and I am just not capable to understand the whole 10000 lines of code ;)
I am using Intel XDK for Mobile UI Design and I have inserted a header which contains pictures and text. However i am unable to add anything in the body. I try to drag different components into the body but nothing happens. Seems that i can only add anything into the header. Here is my code: The content inside the<h4> does not appear on the screen. (this is in <!-- /upage-content -->)
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.min.js"></script>
<script src="cordova.js"></script>
<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="modal/js/modal.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body class="body">
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage">
<div class="upage-outer">
<div class="uib-header header-bg container-group inner-element uib_w_1 uib-header-fixed" data-uib="layout/header" data-ver="0" id="header">
<img class="header_image" src="images/hku_logo.png">
<div class="header_text">
HKU Mobile
</div>
<div class="widget-container content-area horiz-area wrapping-col right">
<a class="uib-graphic-button default-graphic-sizing hover-graphic-button default-graphic-button widget uib_w_2 d-margins" data-uib="media/graphic_button" data-ver="0" id="login_lock">
<img src="images/Login_lock.png">
<span class="uib-caption"></span>
</a>
</div>
</div>
<!-- /upage-content -->
<h4> sdsajidojasid</h4>
</div>
<!-- /upage-outer -->
<!-- popup Portal Login box -->
<div class="modal outer-element uib_w_4 Portal_popup" data-uib="twitter%20bootstrap/modal" data-ver="0" id="Portal_popup" data-backdrop="false" data-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Login to HKU Portal</h4>
</div>
<div class="modal-body">
<div class="col uib_col_1 single-col" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="table-thing widget uib_w_5 popup_text1" data-uib="twitter%20bootstrap/input" data-ver="0">
<label class="narrow-control label-top-left">HKU Portal ID</label>
<input class="wide-control form-control input-sm" type="text" placeholder="Enter your HKU Portal UID" id="portal_id">
</div>
<br>
<div class="table-thing widget uib_w_6 d-margins" data-uib="twitter%20bootstrap/input" data-ver="0">
<label class="narrow-control label-top-left">HKU Portal PIN</label>
<input class="wide-control form-control input-sm" type="password" placeholder="Enter your HKU Portal PIN" id="portal_pin">
</div>
<br>
<br>
<button type="button" class="btn widget uib_w_7 d-margins btn-primary" data-uib="twitter%20bootstrap/button" data-ver="0"><i class="glyphicon button-icon-left" data-position="left"></i>Log in</button>
<span class="uib_shim"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
</html>
This was missing from my code:
<div class="upage-content" id="mainsub"> when the header <div> closes