Componente selectInputDate, cierra un pop up modal de Boostrap

Cuando tengo un componente de Icefaces 1.8.2, selectInputDate en una pantalla. En la misma pantalla tengo un button que abre un modal de Bootstrap, cambio el valor de un input que se encuentra en el modal, hago click afuera y me cierra el modal.

Si saco el componente selectInputDate funciona bien el modal de bootstrap. Porque puede ser que ese componente haga que me cierre el modal?

block executing before modal click

I have a modal with 2 buttons that have a click function. Inside of each of these click functions is a block that’s suppose to only be executed when clicked. However the block seems to be executed before one of the buttons are clicked.

buttons: [             {                 text: $  .mage.__(`Don't Allow`),                 class: 'dontAllow',                 click: function(){                     console.log(`I clicked Don't Allow`);                     <?= $  block->disableAdminUsage(); ?>                     this.closeModal();                 },             },             {                 text: $  .mage.__('Ok'),                 class: 'action',                 click: function(){                     console.log("I clicked Ok");                     <?= $  block->enableAdminUsage(); ?>                     this.closeModal();                 },             }         ], 

Ver detalle del producto en un modal laravel 5.5

Hola buenos días actualmente estoy aprendiendo a programar y empece con laravel 5.5 y estoy creando una tienda online, hasta el momento todo bien al querer mostrar el detalle de un producto solo creo una funcion show en el controlador y paso el id del producto que se quiere consultar y redireccionar a una vista, pero quisiera saber si en lugar de esto puedo mostrar el detalle del producto en un modal y si es asi como lo puedo hacer, no se como pasar el id y sus detalles al modal, se que se puede hacer con Jquery pero no se mucho al respecto puesto que apenas estoy aprendiendo queria saber si me pueden dar una idea de como hacer esto porfavor he revisado videos y ejemplos pero es complicado para mi puesto que utilizan AJAX para editar y crear y eso aun no lo requiero espero puedan explicarme de antemano muchas gracias.

<div class="row isotope-grid">          @foreach($  products as $  pro)  @foreach($  pro->productos as $  prouser)         <div class="col-sm-6 col-md-4 col-lg-4 p-b-35 isotope-item products">             <!-- Block2 -->           <div class="block2">              <div class="block2-pic hov-img0 label-new" data-label="New">               <img src="{{asset('imagenes/productos/'.$  prouser->imagen)}}" alt="IMG-PRODUCT" style="height: 280px; object-fit: cover;" >                <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">                 Mas Detalles               </a>             </div>              <div class="block2-txt flex-w flex-t p-t-14">               <div class="block2-txt-child1 flex-col-l ">                 <a href="{{URL::action('StoreController@show',$  prouser->idProducto)}}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">                  {{$  prouser->nombre}}                 </a>                  <span class="stext-105 cl3">                    {{$  prouser->costo_unitario}}                 </span>               </div>                <div class="block2-txt-child2 flex-r p-t-3">                 <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">                   <img class="icon-heart1 dis-block trans-04" src="{{asset('template/images/icons/icon-heart-01.png')}}" alt="ICON">                   <img class="icon-heart2 dis-block trans-04 ab-t-l" src="{{asset('template/images/icons/icon-heart-02.png')}}" alt="ICON">                 </a>               </div>              </div>            </div>         </div>         @endforeach @endforeach   

imagen 1

modal2

como puedo resetear un modal de Bootstrap 4?

Estoy trabajando con Angular y Bootstrap. Tengo un Carusel con un boton que dispara un modal y dentro de este modal tengo otro carousel (ambos caruseles son del framework Ngx-Bootstrap). El problema que tengo es que cuando abro un modal y voy pasando las imagenes y la dejo por lo menos en la imagen nuemro 5, luego de que cierro el modal, y abro otro modal, este me empieza a mostrar las imagenes de la numero 5. A pesar de que este carusel tiene una variable startFromIndex donde se le indica en que imagen se quiere comenzar a mostrar, esta imagen la tengo con valor 0 y funciona solo para la primera vez, luego de que muevo las imagenes como lo indico anteriormente, no se inicia en la imagen 0. como podria resolver este problema? he leido sobre resetar el modal para que se inicie cada vez con todo vacio pero no he logrado hacerlo. alguien podria ayudarme? aqui dejo el codigo de lo que tengo hasta ahora:

Este es el codigo del carusel principal donde tengo el boton “Ver Detalles” que abra el modal con el otro carousel:

<div class="container mt-2 mb-4" >   <div class="d-flex justify-content-center align-items-center">        <div class="d-flex align-items-center justify-content-center">         <div> <span class="text-hot">           <b>HOT</b> </span> </div>       </div>       <div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center">           <div class="text-hot align-middle">               list           </div>       </div>   </div>     <div class="d-flex justify-content-center">          <div class="btn-group3 ml-2">         <button type="button" class="btn dropdown-toggle" id="dropdown-buscar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">           Seleccione País         </button>         <div class="dropdown-menu">           <a class="dropdown-item" href="#">Panamá</a>           <a class="dropdown-item" href="#">Colombia</a>           <a class="dropdown-item" href="#">Venezuela</a>         </div>       </div>    </div> </div>   <!-- Imagen de Pre-Carga--> <div class="container-fluid d-flex justify-content-center" id="cont-preCarga" *ngIf="preCarga">     <img src="../../assets/images/slider/spinner.gif"> </div>  <app-modal  [inmueble]="this.inmueble2" class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> </app-modal>     <carousel [itemsPerSlide]="itemsPerSlide"           [singleSlideOffset]="singleSlideOffset"           [interval]="false"           [noWrap]="noWrap"           [startFromIndex]="5">   <slide class="col-md-2" *ngFor="let imagenPortada of  this.hostlistService.inmuebles; let index=index" style="width: 500px;">                                          <img src="{https://es.stackoverflow.com/questions/277997/como-puedo-resetear-un-modal-de-bootstrap-4}{{imagenPortada.id}}_{{imagenPortada.fotos[0]}}" alt="imagen de slide" style="display: block; width: 100%; height: 300px;">     <!--<img src="../../assets/images/slider/logo.png" alt="imagen de slide" style="z-index: 10; width: 100%; height: 300px; position: absolute; left: 0; top:0;">-->     <div class="carousel-caption">       <h4>Slide {{index}}</h4>     </div>           <div class="row">       <div class="col-12">           <p class="text-left text-precio"> <i class="fas fa-dollar-sign">           </i> Precio: {{imagenPortada.precio | currency: 'USD':true:'1.2-2'}}          </p>       </div>     </div>     <div class="row">       <div class="col-12">           <p class="text-left"> <i class="fas fa-map-marker-alt"></i> Ubicacion: {{imagenPortada.pais}}          </p>       </div>     </div>     <div class="row">       <div class="d-flex col-12">         <div class="cont-verDetalles d-flex justify-content-center">           <button (click)="obtenerInfo(imagenPortada)" type="button" class="mt-2 btn btn-secondary" data-toggle="modal" data-target="#exampleModal2">Ver detalles</button>         </div>       </div>     </div>    </slide> </carousel> 

Aqui esta el codigo del modal con el otro carusel:

<!-- <h1> Tipo Inmueble: {{tipo}}</h1> --> <!-- <div *ngIf="tipo!=''">   REVISAR CONDICION-->    <div *ngIf="inmueble !== undefined">   <!--<div *ngIf="inmueble.tipo=='CA' || inmueble.tipo=='APTO' ; else opcion"> -->   <div class="modal-dialog modal-lg" role="document">     <div class="container-fluid">     <div class="modal-content">       <div class="modal-header">         <div class="modal-title text-center" style="width: 100%;" role="alert"> <h3 class="texto-helvetica">{{inmueble.nombre}}</h3> </div>         <button type="button" class="close" data-dismiss="modal" aria-label="Close">           <span aria-hidden="true">&times;</span>         </button>       </div>                     <div class="modal-body">       <div class="row">       <div class="col-md-12">         <carousel [itemsPerSlide]="itemsPerSlide"           [singleSlideOffset]="singleSlideOffset"           [interval]="false"           [noWrap]="noWrap"           [startFromIndex]="0">           <slide class="col-md-12" *ngFor="let imagen of inmueble.fotos;" style="max-width: 100%;">               <!--<ngui-in-view>                 <img class="img-fluid" *ngIf src="{https://es.stackoverflow.com/questions/277997/como-puedo-resetear-un-modal-de-bootstrap-4}{{inmueble.id}}_{{imagen}}" alt="imagen de slide" style="display: block; width: 100vw; height: 300px;">               </ngui-in-view> -->                        <img class="img-fluid" src="{https://es.stackoverflow.com/questions/277997/como-puedo-resetear-un-modal-de-bootstrap-4}{{inmueble.id}}_{{imagen}}" alt="imagen de slide" style="display: block; width: 100vw; height: 300px;">            </slide>         </carousel>       </div>       </div>       <div class="row mt-4" id="fila-descripcion" >         <div class="col-md-12" id="cont-descripcion">           <h3 class="text-center texto-helvetica"><span class="texto-blanco">Descripcion</span></h3>       </div>       </div>       <div class="row mt-4 pl-2 pr-2 pb-2">         <div class="col-md-12" id="cont-descripcion">           <p class="texto-helvetica text-justify">{{inmueble.descripcion}}</p>         </div>       </div>       <div class="row">          <div class="col-md-12">            <p> <i class="fas fa-map-marker-alt fa-2x"></i> Ubicacion: </p>         </div>       </div>       <div class="row mt-4">          <div class="col-md-4 col-4 d-flex justify-content-center">           <p class="text-center"> <i class="fas fa-bath fa-2x "></i> <br> Baños: {{inmueble.bano}} <p>          </div>         <div class="col-md-4 col-4">           <p class="text-center"> <i class="fas fa-hot-tub fa-2x"></i> <br> Baños de Servicio: {{inmueble.banoServicio}} <p>          </div>         <div class="col-md-4 col-4">           <p class="text-center"> <i class="fas fa-bed fa-2x "></i> <br> Habitaciones: {{inmueble.habitacion}} <p>          </div>       </div>        <div class="row mt-2">          <div class="col-md-4 col-4 d-flex justify-content-center">           <p class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br> metros construidos: {{inmueble.metroConstruido}} <p>          </div>         <div class="col-md-4 col-4">           <p class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br> metros de terreno: {{inmueble.metroTerreno}} <p>          </div>         <div class="col-md-4 col-4">           <p class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br> Pago de Condominio: {{inmueble.condominio}} <p>          </div>       </div>        <div class="row mt-2 d-flex justify-content-center">          <div class="col-md-4 col-4 d-flex justify-content-center">           <p class="text-center"> <i class="fas fa-car fa-2x"></i> <br> estacionamientos: {{inmueble.estacionamiento}} <p>          </div>         <div class="col-md-4 col-4">           <p class="text-center"> <i class="fas fa-home fa-2x"></i> <br> antiguedad: {{inmueble.antiguedad}} <p>          </div>       </div>        <div class="row mt-2 d-flex justify-content-center">          <div class="col-md-4 col-4 d-flex justify-content-center">           <p class="text-center"> <i class="fas fa-car fa-2x"></i> <br> estacionamientos: {{inmueble.estacionamiento}} <p>          </div>         <div class="col-md-4 col-4">           <p class="text-center"> <i class="fas fa-home fa-2x"></i> <br> antiguedad: {{inmueble.antiguedad}} <p>          </div>       </div>      </div>       <div class="modal-footer">         <button type="button" (click)="resetearModal()" class="btn btn-secondary" data-dismiss="modal">Close</button>       </div>     </div>     </div>   </div>   <!--<ng-template #opcion>   <h1>Hello</h1>   <h1>Hello</h1>   <h1>Hello</h1>   <h1>Hello</h1>   <h1>Hello</h1>  </ng-template> --> </div>

How To Make Popup Modal Appear When Clicking a Link?

I am trying to create a Login Modal Form for an application. However, I want the popup to appear when I click a link versus a button. In other words, when I click the login link in my navbar, I don’t want to be redirected to another page entirely. I just want the modal to pop up.

I’m very new to ReactJS, so I’m not sure how to go about this. Could somebody please help me understand how to get this function to work? I’d really appreciate it.

Additionally, if anyone knows of some great resources on how to implement a proper login form, I would also greatly appreciate that. I found a few on CodePen, but none of them really show a clear and approachable way on how to build this component. At least, for a beginner like me.

Located below is my code. Also, if it helps, I provided the link to the site I am currently using as a reference to build this code.

Resource: https://react-bootstrap.github.io/components/modal/

App.js

import React from 'react'; import {BrowserRouter, Route, Switch} from 'react-router-dom' import Navbar from './components/Navbar/navbar.js'; import Footer from './components/Footer/footer.js'; import Home from './pages/Home/home.js'; import Login from './pages/Login/login.js'; import Languages from './pages/Languages/languages.js';  function App() {   return (     <div className="App">       <BrowserRouter>         <Navbar/>           <Switch>             <Route exact path="/" component={Home}/>             <Route path="/login" component={Login}/>             <Route path="/languages" component={Languages}/>           </Switch>       </BrowserRouter>       <Footer />     </div>   ); }  export default App; 

Login.js

import React, { Component } from 'react'; // import { connect } from 'react-redux'; import Modal from 'react-bootstrap/Modal'; import Button from 'react-bootstrap/Button'; import './login.css';  class Login extends Component {     constructor(props, context) {         super(props, context);          this.handleShow = this.handleShow.bind(this);         this.handleClose = this.handleClose.bind(this);          this.state = {           show: false,         };       }        handleClose() {         this.setState({ show: false });       }        handleShow() {         this.setState({ show: true });     }      render() {         return (             <>                 <Button variant="primary" onClick={this.handleShow}>                   Launch demo modal                 </Button>                  <Modal show={this.state.show} onHide={this.handleClose}>                   <Modal.Header closeButton>                     <Modal.Title>Login</Modal.Title>                   </Modal.Header>                   <Modal.Body>...</Modal.Body>                   <Modal.Footer>                     <Button variant="danger" onClick={this.handleClose}>                       Cancel                     </Button>                   </Modal.Footer>                 </Modal>             </>         );     } }  export default Login; 

SPFX open new list item using modal dialog

The code below opens a new item in Iframe/modal dialog. But when the user saves or closes the modal form i would like it to be closed and not redirected to any other page.

Is there any way I can close the modal form when the item is saved.

The option to create a custom form with all the controls seems a bit long winded.

<PrimaryButton text={'Open Dialog'} onClick={this._onClick.bind(this)} />               <PrimaryButton text={'Open Clients Form'} onClick={this._onClientClick.bind(this)} />               <IFrameDialog                 url={'/Lists/MyList/NewForm.aspx'}                 iframeOnLoad={this._onDlgLoaded.bind(this)}                 hidden={!this.state.isDlgOpen}                 onDismiss={this._onDlgDismiss.bind(this)}                 modalProps={{                   isBlocking: true                 }}                 dialogContentProps={{                   type: DialogType.close,                   showCloseButton: true                 }}                 width={'800px'}                 height={'900px'} />              </div>  

Error extraño en impresion en modal de respuesta json de ajax

estoy realizando un pequeño script que pide por ajax los empleados que estan de descanso o vacaciones y me los devuelve en un json y yo quiero mostrar estos o bien en un calendario laboral o bien en una tabla…. para empezar los he puesto en una tabla, el problema es que cuando esta de descanso la tabla me la crea en la pagina y no dentro del modal Ventana modal:

    <!-- Modal Descansos -->     <div class="modal fade" id="descansosModal" tabindex="-1" aria-hidden="true">         <div class="modal-dialog" 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">&times;</span>                     </button>                     <h4 class="modal-title">Descansos</h4>                 </div>                 <div class="modal-body">                     <table class="table" cellpadding="5px">                         <thead>                           <th>Trabajador</th>                           <th>Fecha</th>                           <th>Tipo</th>                         </thead>                         <tbody id="dtbody">                         </tbody>                     </table>                 </div>             </div>         </div>     </div> 

Funcion jquery:

$  ('#descansos').on('click', function(e){ // add event submit         $  ('#dtbody').empty()         var cod=$  ('#trabajador').val();         var fecha=$  ('#fecha').val();          $  .ajax({             url: 'ajax/descansos.php',             type: 'POST',             dataType: 'JSON',             data: {                 cod: cod,                 fecha: fecha,             }         }).done( function (response) {                 for (  i = 0 ; i < response.length; i++){ //cuenta la cantidad de registros                     var nuevafila= "<tr><td>" +                         response[i].CodTrabajador + "</td><td>" +                         response[i].Fecha + "</td><td>" +                         response[i].Tipo + "</td></tr>"                          $  ('#dtbody').append(nuevafila)                 }                 $  ('#descansosModal').modal('toggle');             }); }); 

Respuesta json:{CodTrabajador: "985", Tipo: "Descanso", Fecha: "17-07-2019"}

Si el trabajador trabaja el dia de hoy sale bien: introducir la descripción de la imagen aquí

Si el trabajador no trabaja el dia de hoy sale mal: introducir la descripción de la imagen aquí

Llevo un rato y no veo el error, me podeis ayudar?

Asp.Net MVC from in modal bootstrap

First, some of the technologies in play: Asp.Net Mvc 5, Bootstrap 3, JQuery.

On my view I want to create a bootstrap model dialog, with a simple form in it. When the user clicks submit, there are two outcomes.

1) Invalid input, should display error message from the server

2) OK input, redirect/refresh the same page, so the dialog is closed and pagedata is updated.

Since the modal dialog is shown using javascript, I guess I have to post to the server using JQuery ajax post? That seems to be the best way to keep the modal dialog visible, if there is an error?

I’m also unsure about where to place the post action. In the same controller or perhaps in a new web api controller (since this I’m doing a ajax post).