У меня есть внешняя форма, которая загружается в iframe.Я установил body на position:relative,, iframe div равен position: absolute, который наследует высоту тела, так как я не хочу показывать содержимое тела, ЕСЛИ открыт модал iframe.
Какможет заставить модал не выделяться за пределы своего собственного контента, не видя, что стоит за div, пока открыт.Ниже приведен мой код.
<div id="app">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at molestie mi. Sed vitae lacinia lorem.
Nam vulputate magna nunc, eget convallis justo consequat eget. Donec lobortis blandit nibh, ac luctus
ligula mattis nec. Aenean dignissim egestas est, non vestibulum nibh. Nulla vehicula, ante vitae gravida
ultricies, diam purus facilisis lorem, quis facilisis sem libero sed nulla. In bibendum quam vel nulla
vehicula cursus. Suspendisse pellentesque in ante id pellentesque. Nulla elementum massa lacinia dui
pellentesque sagittis. Vivamus quis lobortis sapien, ut dignissim urna. Proin mollis libero quis aliquam
luctus.
Ut feugiat feugiat orci in accumsan. Phasellus tincidunt sollicitudin augue ut ultrices. Maecenas a dolor
ipsum. Phasellus fermentum hendrerit orci, ac scelerisque mauris hendrerit sed. Proin eu quam lectus. In
quis metus ut dolor suscipit cursus non ac erat. Nulla facilisi. Ut molestie, dui sit amet interdum
condimentum, odio neque congue dolor, eget bibendum ipsum metus vel lacus. Nulla facilisi. Vivamus
malesuada orci vitae nibh faucibus, eu convallis arcu pretium.
Donec fermentum tempor orci sed vulputate. Fusce eu interdum libero. Nunc in iaculis tellus. Suspendisse
potenti. Vestibulum ornare erat vestibulum ante rutrum fermentum. Cras nec egestas quam. Nam fringilla nec
nunc at dignissim. Aliquam non scelerisque massa. Integer nec sem vitae arcu dictum pharetra. Donec nisi
massa, placerat ut scelerisque vitae, pharetra tempor eros. Ut iaculis quam tortor.
Donec augue mi, fringilla ornare iaculis ut, efficitur pulvinar nisi. Nulla non est a diam tempus tincidunt
elementum in purus. Nulla facilisi. Pellentesque iaculis diam ut diam dictum volutpat. Nulla gravida,
libero volutpat rutrum porttitor, urna tortor consectetur magna, non ultrices ex urna eu sapien. Duis
rutrum gravida lobortis. Sed suscipit ligula augue, vel finibus nisi ornare et. Aliquam purus ligula,
vestibulum at molestie in, aliquam eget purus. Duis volutpat scelerisque metus, quis malesuada lacus
consequat quis.
Praesent euismod ornare leo vel dictum. Duis libero mauris, fermentum eget efficitur sit amet, placerat a
dui. Mauris pretium eros id laoreet viverra. Curabitur eu tortor ac ex blandit congue eu in nibh. Curabitur
id facilisis enim. Ut dapibus ipsum non lacus placerat porta. Fusce pulvinar massa at rhoncus molestie
</p>
<p>1914 translation by H. Rackham
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself,
because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter
consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to
obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and
pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious
physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man
who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces
no resultant pleasure</p>
<button @click="openModal">Show</button>
<div class="overlay" v-show="overlay">
<i class="fas fa-times-circle fa-7x" @click="closeModel"></i>
<div class="modal-container">
<div class="modal">
<iframe frameborder="0" height="100%" width="100%" scrolling="yes" src="dummy-form.html">
</iframe>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
overlay: false
},
methods: {
openModal() {
console.log("yes");
this.overlay = true;
},
closeModel() {
this.overlay = false;
}
},
})
</script>
<style>
body {
position: relative;
top: 0;
left: 0;
}
.overlay {
width: 100%;
height: 100%;
background: rgba(255, 200, 25, 1);
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.fas {
cursor: pointer;
align-self: flex-end;
}
.modal {
width: 100%;
height: 100%;
display: flex;
}
</style>
и dummy-form.html
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>